Тхе граница је скраћено својство у ЦСС-у, које се користи за додавање ивице на елемент. Омогућава нам да одредимо ивицу кутије. Поставља ширину, стил и боју ивице. Ово ЦСС својство укључује следећа својства граница:

ширина границе:Својство бордер-видтх се користи за подешавање ширине ивице. Такође можемо користити унапред дефинисане вредности које су танак, средњи, и дебео да подесите ширину ивице. Поставља дебљину ивице. Његова подразумевана вредност је средње .
Ово својство се не може користити самостално. Увек се користи са другим својствима ивице као што је својство 'бордер-стиле' да се прва постави граница; иначе, неће радити.
Ширина ивице може бити различита за сваку појединачну страну. То се може урадити коришћењем границе-доле-ширине, граница-врх-ширина, граница-десно-ширина , и граница-лева-ширина .у стилу границе:Ово својство одређује стил ивице. Дефинише да ли је ивица пуна, тачкаста, испрекидана, двострука, жлеб и једна од других могућих вредности. Без подешавања овог својства, тј. без подешавања стила ивице, ниједна друга својства ивице неће радити. Граница ће бити невидљива без навођења у стилу границе . То је зато што је подразумевана вредност овог ЦСС својства ниједан .
Слично граница-ширина , стил ивице може бити различит за сваку појединачну страну. То се може урадити помоћу својстава ивица-доле-стил, ивица-врх-стил, ивица-десно-стил , и у стилу границе лево .боја ивице:Омогућава нам да променимо боју ивице. Боју можемо подесити коришћењем имена боје, РГБ вредности или хексадецималне вредности. Слично као граница-ширина и у стилу границе , можемо променити боју ивице појединачно, односно можемо променити боју доње, горње, леве и десне стране ивице елемента. То се може урадити коришћењем својстава ивица-доња-боја, ивица-горе-боја, ивица-десна-боја , и граница-лево-боја .
Тхе боја ивице имовина се не може користити сама. Мора се користити са другим својствима ивице као што је својство 'бордер-стиле' за постављање границе; иначе, неће радити.

граница наспрам обриса

Иако су границе и обриси веома слични, постоје неке разлике између обриса и ивица које су следеће:

• Користећи контуру, не можемо применити различиту ширину, стил и боју контуре за четири стране елемента, док у ивици можемо применити дату вредност за све четири стране елемента.
• Ивица је део димензије елемента, док контура није део димензије елемента. Значи, није важно колико дебео обрис нанесемо на елемент, његове димензије се неће променити.

Хајде да видимо пример да разумемо својство границе.

Пример

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Излаз

Сада, постоји још један пример у којем користимо оба нацрт и граница својства.

Пример

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Излаз