The okraj je zkrácená vlastnost v CSS, která se používá k přidání ohraničení prvku. Umožňuje nám specifikovat hranici krabice. Nastavuje šířku, styl a barvu ohraničení. Tato vlastnost CSS zahrnuje následující vlastnosti ohraničení:

šířka okraje:Vlastnost border-width se používá k nastavení šířky ohraničení. Můžeme také použít předdefinované hodnoty, které jsou tenké, střední, a tlustý pro nastavení šířky okraje. Nastavuje tloušťku okraje. Jeho výchozí hodnota je střední .
Tuto vlastnost nelze použít samostatně. Vždy se používá s ostatními vlastnostmi ohraničení, jako je vlastnost 'border-style' k nastavení ohraničení jako první; jinak to nebude fungovat.
Šířka okraje se může pro každou jednotlivou stranu lišit. To lze provést pomocí border-bottom-width, border-top-width, border-right-width , a border-left-width .styl ohraničení:Tato vlastnost určuje styl ohraničení. Definuje, zda je ohraničení plné, tečkované, čárkované, dvojité, drážka a jedna z dalších možných hodnot. Bez nastavení této vlastnosti, tedy bez nastavení stylu ohraničení, nebude fungovat žádná z ostatních vlastností ohraničení. Hranice bude neviditelná bez určení hraniční styl . Důvodem je, že výchozí hodnota této vlastnosti CSS je žádný .
Podobný hranice-šířka , styl ohraničení může být pro každou jednotlivou stranu jiný. To lze provést pomocí vlastností border-bottom-style, border-top-style, border-right-style , a okraj-levý styl .barva okraje:Umožňuje nám změnit barvu okraje. Barvu můžeme nastavit pomocí názvu barvy, hodnoty RGB nebo hexadecimální hodnoty. Podobné jako hranice-šířka a hraniční styl , můžeme změnit barvu ohraničení individuálně, tj. můžeme změnit barvu spodní, horní, levé a pravé strany ohraničení prvku. To lze provést pomocí vlastností border-bottom-color, border-top-color, border-right-color , a border-left-color .
The barva ohraničení majetek nelze užívat samostatně. Musí být použit s dalšími vlastnostmi ohraničení, jako je vlastnost 'border-style' pro nastavení ohraničení; jinak to nebude fungovat.

ohraničení vs. obrys

Ačkoli jsou okraje a obrysy velmi podobné, mezi obrysy a ohraničením existují určité rozdíly, které jsou následující:

• Pomocí obrysu nemůžeme použít různou šířku obrysu, styl a barvu pro čtyři strany prvku, zatímco v ohraničení můžeme použít zadanou hodnotu pro všechny čtyři strany prvku.
• Ohraničení je součástí rozměru prvku, zatímco obrys není součástí rozměru prvku. To znamená, že nezáleží na tom, jak tlustý obrys na prvek aplikujeme, jeho rozměry se nezmění.

Podívejme se na příklad pro pochopení vlastnosti border.

Pří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ýstup

Nyní je zde další příklad, ve kterém používáme obojí obrys a okraj vlastnosti.

Pří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ýstup