The frontieră este o proprietate scurtă în CSS, care este folosită pentru a adăuga o chenar pe un element. Ne permite să specificăm chenarul casetei. Setează lățimea, stilul și culoarea chenarului. Această proprietate CSS include următoarele proprietăți de chenar:

lățimea graniței:Proprietatea border-width este folosită pentru a seta lățimea chenarului. Putem folosi și valorile predefinite care sunt subțire, mijlocie, și gros pentru a seta lățimea chenarului. Stabilește grosimea chenarului. Valoarea sa implicită este mediu .
Această proprietate nu poate fi utilizată singură. Este întotdeauna folosit cu alte proprietăți de chenar, cum ar fi proprietatea „border-style” pentru a seta mai întâi chenarul; altfel, nu va funcționa.
Lățimea chenarului poate fi diferită pentru fiecare parte în parte. Se poate face utilizând lățimea chenar-bottom-width, chenar-sus-lățime, chenar-dreapta-lățime , și chenar-stânga-lățime .stil de chenar:Această proprietate specifică stilul chenarului. Acesta definește dacă chenarul este solid, punctat, punctat, dublu, groove și una dintre celelalte valori posibile. Fără a seta această proprietate, adică fără a seta stilul de chenar, niciuna dintre celelalte proprietăți de chenar nu va funcționa. Chenarul va fi invizibil fără a specifica stil de chenar . Acest lucru se datorează faptului că valoarea implicită a acestei proprietăți CSS este nici unul .
Similar cu lățimea graniței , stilul chenarului poate fi diferit pentru fiecare parte individuală. Se poate face folosind proprietățile chenar-jos-stil, chenar-stil de sus, chenar-dreapta-stil , și border-stânga-stil .culoarea chenarului:Ne permite să schimbăm culoarea chenarului. Putem seta culoarea utilizând numele culorii, valoarea RGB sau valoarea hex. Similar cu lățimea graniței și stil de bordura , putem schimba individual culoarea marginii, adică putem schimba culoarea părții de jos, sus, stânga și dreapta a marginii unui element. Se poate face folosind proprietățile chenar-jos-culoare, chenar-sus-culoare, chenar-dreapta-culoare , și chenar-stânga-culoare .
The chenar-culoare proprietatea nu poate fi folosită singură. Trebuie folosit cu alte proprietăți de bordură, cum ar fi proprietatea „border-style” pentru a seta chenarul; altfel, nu va funcționa.

chenar vs contur

Deși granițele și contururile sunt foarte asemănătoare, există unele diferențe între contururi și chenare, care sunt după cum urmează:

• Folosind un contur, nu putem aplica lățimea, stilul și culoarea conturului diferit pentru cele patru laturi ale unui element, în timp ce, într-un chenar, putem aplica valoarea furnizată pentru toate cele patru laturi ale unui element.
• Chenarul este o parte a dimensiunii elementului, în timp ce conturul nu este o parte a dimensiunii elementului. Înseamnă, nu contează cât de gros este un contur aplicăm elementului, dimensiunile acestuia nu se vor schimba.

Să vedem un exemplu pentru a înțelege proprietatea de frontieră.

Exemplu

 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> 

Ieșire

Acum, există un alt exemplu în care le folosim pe ambele contur și frontieră proprietăți.

Exemplu

 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. 

Ieșire