Border	Rámeček
Border-color	Barva rámečku
Border-radius	Zakulacení rohů
Border-style	Styl rámečku
Border-width	Šířka rámečku

Border

Border nastavuje rámeček okolo HTML elementu.
Syntaxe vlastnosti border je následující: border: sířka styl barva;
Border nastaví všechny 4 hrany rámečku na stejný styl. Pokud chceme mít každou hranu jinou, můžeme použít tyto vlastnosti:

• border-bottom - Dolní hrana rámečku
• border-left - Levá hrana rámečku
• border-right - Pravá hrana rámečku
• border-top - Horní hrana rámečku

Tři příklady zapisu se stejným výsledkem a překrytím rámečků.

  border:16px double green; 

  border-width: 16px; border-style: double; border-color: green ; 

  border-top: 16px double green; border-left: 16px double green; border-bottom: 16px double green; border-right: 16px double green; 

Pokud se neuvede třetí hodnota (pro barvu), vezme se výchozí barva písma:

 
  border:10px double; 
 

a ještě jeden příklad:

 
h4 style="border-top: 3px solid red; padding-top: .3em"
   

Border-color

Border-color nastavuje barvu rámečku okolo HTML elementu.

border-color

hodnoty	barva rámečku
barva	barva rámečku
transparent	průhledná barva, rámeček se tedy nevykresluje.
inherit	barva rámečku se určí podle rodičovského elementu.

Pro každou složku barvy rámečku existuje zvlášť CSS vlastnost, která ji nastavuje.

• border-bottom-color - Barva dolního rámečku
• border-left-color - Barva levého rámečku
• border-right-color - Barva pravého rámečku
• border-top-color - Barva horního rámečku

Pokud zadáme jen jednu hodnotu, bude označovat barvu všech hran rámečku. Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá). Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní. Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku:

   
  border-color: red;
 
   border-color: red green;
 
   border-color: red green orange;
   
   border-color: red green orange gray;
                               

Border-radius

Border-radius nastavuje poloměr zakulacení rohů rámečku okolo HTML elementu.

border-radius

hodnoty	radius
delka	délka poloměru např. v pixelech
procenta	délka poloměru rohu vyjádřená jako část z velikosti elementu

Pro každý roh rámečku existuje zvlášť CSS vlastnost, která nastavuje jeho poloměr.

• border-bottom-left-radius - Levý dolní roh rámečku
• border-bottom-right-radius - Pravý dolní roh rámečku
• border-top-left-radius -Levý horní roh rámečku
• border-top-right-radius - Pravý horní roh rámečku

Pokud zadáme jen jednu hodnotu, bude udávat poloměr všech rohů rámečku. Pokud zadáme 2 hodnoty, první označuje levý horní a pravý dolní roh, druhá pravý horní a levý dolní roh. Když zadáme 3 hodnoty, první označuje levý horní roh, druhá pravý horní a levý dolní roh, třetí pravý dolní roh. Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku v pořadí levý horní, pravý horní, pravý dolní, levý dolní:

  
border-radius: 30px;
 
 
border-radius: 30px 10px;
 
 
border-radius: 30px 20px 5px;
 
 
border-radius: 40px 30px 20px 5px;
 

Zadat můžeme dokonce 2 poloměry ke každému rohy, abychom nastavili každé polovině rohu jiný. Hodnoty se zadávají stejně, jako výše, pouze se přidají další za lomítkem, které nastavují druhou polovinu rohů: Hodnoty před lomítkem jsou vodorovné poloměry, za lomítkem svislé.

 
border-radius: 40px 30px 10px 5px / 5px 10px 30px 40px;
 

Border-style

Border-style nastavuje styl čáry rámečku okolo HTML elementu.

border-style

hodnoty	příklad
solid	border-style: solid
dotted	border-style: dotted
dashed	border-style: dashed
double	border-style: double
groove	border-style: groove
ridge	border-style: ridge
inset	border-style: inset
outset	border-style: outset
none	border-style: none
inherit	zdědí styl čáry rámečku nadřazeného elementu.
hidden	rámeček se nevykreslí

Pro každou složku stylu rámečku existuje zvlášť CSS vlastnost:

• border-bottom-style - Styl čáry dolního rámečku
• border-left-style - Styl čáry levého rámečku
• border-right-style - Styl čáry pravého rámečku
• border-top-style - Styl čáry horního rámečku

Vlastnost border-style můžeme zasat různými způsoby. Pokud zadáme jen jednu hodnotu, bude označovat styl všech hran rámečku. Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá). Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní. Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku:

 
   border-style: dotted;
 
  border-style: dotted double;
  
  border-style: dotted double solid;
  
  border-style: dotted double solid dashed;

Border-width

Border-width nastavuje šířku rámečku okolo HTML elementu.

border-width

hodnoty	šířka rámečku
inherit	zdědí šířku rámečku nadřazeného elementu
šírka	šířka rámečku např. v pixelech
thin	slabý rámeček
medium	středně silný rámeček
thick	tlustý rámeček

Pro každou složku šířky rámečku existuje zvlášť CSS vlastnost.

• border-bottom-width - Šířka dolního rámečku
• border-left-width - Šířka levého rámečku
• border-right-width - Šířka pravého rámečku
• border-top-width - Šířka horního rámečku

Pokud zadáme jen jednu hodnotu, bude označovat šířku všech hran rámečku. Pokud zadáme 2 hodnoty, první označuje vodorovné hrany (horní a dolní), druhá hodnota označuje svislé hrany (levá a pravá). Když zadáme 3 hodnoty, první označuje horní hranu rámečku, druhá levou a pravou, třetí dolní. Hodnoty můžeme zadat samozřejmě i 4 a tak nastavit individuálně všechny 4 hrany rámečku:

 
    border-width: thin;
  
    border-width: thin thick;
  
    border-width: thin thick medium; 
 
    border-width: thin thick medium 30px;