Hraniční strany CSS
Ohraničení CSS – jednotlivé strany
Z příkladů na předchozích stránkách jste viděli, že je možné pro každou stranu zadat jiný okraj.
V CSS jsou také vlastnosti pro specifikaci každého z ohraničení (nahoře, vpravo, dole a vlevo):
Příklad
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Výsledek:
Different Border Styles
Výše uvedený příklad dává stejný výsledek jako tento:
Příklad
p {
border-style: dotted solid;
}
Funguje to takto:
Pokud má border-stylevlastnost čtyři hodnoty:
- styl ohraničení: tečkovaná plná dvojitá přerušovaná;
- horní okraj je tečkovaný
- pravý okraj je pevný
- spodní okraj je dvojitý
- levý okraj je přerušovaný
Pokud má border-stylevlastnost tři hodnoty:
- Border-style: tečkovaný plný dvojitý;
- horní okraj je tečkovaný
- pravé a levé okraje jsou pevné
- spodní okraj je dvojitý
Pokud má border-stylevlastnost dvě hodnoty:
- styl ohraničení: tečkovaná plná;
- horní a spodní okraje jsou tečkované
- pravé a levé okraje jsou pevné
Pokud má border-stylevlastnost jednu hodnotu:
- styl ohraničení: tečkovaný;
- všechny čtyři okraje jsou tečkované
Příklad
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Vlastnost border-styleje použita ve výše uvedeném příkladu. Funguje však také s
border-width
a border-color.