The hranica je skrátená vlastnosť v CSS, ktorá sa používa na pridanie okraja k prvku. Umožňuje nám určiť hranicu krabice. Nastavuje šírku, štýl a farbu okraja. Táto vlastnosť CSS obsahuje nasledujúce vlastnosti ohraničenia:

šírka okraja:Vlastnosť border-width sa používa na nastavenie šírky okraja. Môžeme použiť aj preddefinované hodnoty, ktoré sú tenké, stredné, a hustý na nastavenie šírky okraja. Nastavuje hrúbku okraja. Jeho predvolená hodnota je stredná .
Túto vlastnosť nemožno použiť samostatne. Vždy sa používa s inými vlastnosťami ohraničenia, ako je vlastnosť „border-style“ na nastavenie ohraničenia ako prvého; inak to nebude fungovať.
Šírka okraja môže byť pre každú jednotlivú stranu iná. Dá sa to urobiť pomocou okraja-dolnej-šírky, border-top-width, border-right-width a border-left-width .štýl okrajov:Táto vlastnosť určuje štýl orámovania. Definuje, či je orámovanie plné, bodkované, prerušované, dvojité, drážkované a jednu z ďalších možných hodnôt. Bez nastavenia tejto vlastnosti, teda bez nastavenia štýlu orámovania, nebude fungovať žiadna z ostatných vlastností orámovania. Hranica bude neviditeľná bez zadania border-style . Dôvodom je, že predvolená hodnota tejto vlastnosti CSS je žiadny .
Podobný hraničná šírka , štýl bordúry môže byť odlišný pre každú jednotlivú stranu. Dá sa to urobiť pomocou vlastností border-bottom-style, border-top-style, border-right-style a border-left-style .farba okraja:Umožňuje nám zmeniť farbu okraja. Farbu môžeme nastaviť pomocou názvu farby, hodnoty RGB alebo hexadecimálnej hodnoty. Podobné ako hraničná šírka a border-style , môžeme zmeniť farbu orámovania individuálne, t.j. môžeme zmeniť farbu spodnej, hornej, ľavej a pravej strany orámovania prvku. Dá sa to urobiť pomocou vlastností border-bottom-color, border-top-color, border-right-color a border-left-color .
The border-color majetok nemožno použiť samostatne. Musí sa použiť s inými vlastnosťami ohraničenia, ako je napríklad vlastnosť „border-style“ na nastavenie ohraničenia; inak to nebude fungovať.

okraj vs. obrys

Aj keď sú okraje a obrysy veľmi podobné, medzi obrysmi a okrajmi existujú tieto rozdiely:

• Pomocou obrysu nemôžeme použiť rozdielnu šírku obrysu, štýl a farbu pre štyri strany prvku, zatiaľ čo v rámci ohraničenia môžeme použiť zadanú hodnotu pre všetky štyri strany prvku.
• Orámovanie je súčasťou rozmeru prvku, zatiaľ čo obrys nie je súčasťou rozmeru prvku. To znamená, že nezáleží na tom, aký hrubý obrys na prvok aplikujeme, jeho rozmery sa nezmenia.

Pozrime sa na príklad na pochopenie vlastnosti border.

Príklad

 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> 

Výkon

Teraz je tu ďalší príklad, v ktorom používame oboje obrys a hranica vlastnosti.

Príklad

 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. 

Výkon