#1 Border
Border neboli okraj prvku, je část prvku, která se nachází mezi částmi padding a margin v CSS modelu boxu.
Jako jedinou z těchto částí, okraj prvku lze barvit, stylizovat jakým způsobem budou zobrazeny, nastavovat jejich tloušťku či zaoblení. V tomto článku se nachází přehled používaných vlastností, které s těmito stylizacemi souvisí.
Zkrácená verze border
Kromě jednotlivých vlastností existuje jednoduchá vlastnost border, která obsahuje údaje všech svých souvisejících vlastností. Slouží ke zkracování kódu, aby nemusel být ve vícero řádcích. Vlastnost border musí obsahovat miinimálně barvu, ale typicky se do ní uvádí i tloušťka a typ.
div {
border: 5px solid #26A548;
/* V pořadí: tloušťka, typ a barva okraje */
}
Podobně jako u vlastností padding a margin, lze také u vlastnosti border nastavit styly pouze na jednu ze čtyř stran, a to pomocí jejich relativních vlastností – border-top, border-right, border-bottom, border-left.
#2 Styly a jejich vlastnosti
Barva okraje
Barvu okraje lze nastavit pomocí vlastnosti border-color, která může obsahovat slovní hodnotu, HEX… (nejčastěji používané barevné hodnoty naleznete v jiném článku). Jestliže barva není specifikována, okraj prvku přebere jeho barvu specifikovanou vlastností color.
Barva okraje může obsahovat také vícero hodnot, které se aplikují na strany podle CSS modelu box (horní, pravá, dolní, levá nebo horní a dolní, levá a pravá).
/* Všechny okraje červené */
div {
border-color: red;
}
/* Modrý horní a dolní okraj, zelený pravý a levý okraj */
div {
border-color: blue green;
}
Tloušťka okraje
Tloušťka okraje se definuje vlastností border-width, jejíž hodnotou může být jedno ze tří klíčových slov – thin (tenká), medium (střední) a thick (tlustá) nebo jakákoliv číselná hodnota s absolutní nebo relativní jednotkou. Opět také platí, že může vlastnost obsahovat vícero hodnot, které se řadí podle CSS box modelu.
/* Tlusté okraje */
div {
border-width: thick;
}
/* 20px okraje */
div {
border-width: 20px;
}
/* Každý okraj jiný */
div {
border-width: 20px 10px 30px 5px;
}
Styl okraje
Okraje prvku mohou mít různé styly, například mohou být tečkované, čárkované, zdvojené… Toto se přizpůsobuje vlastností border-style. Ta může obsahovat pouze tato klíčová slova:
- dashed – čárkovaný okraj
- double – dvojitý okraj
- dotted – tečkovaný okraj
- groove – 3D okraj s vnější „drážkou“ (světlejší částí na jedné straně)
- hidden – neviditelný okraj
- inset – 3D vniřní okraj
- none – bez okraje
- outset – 3D vnější okraj
- ridge – 3D okraj s vnitřní „drážkou“ (světlejší částí na jedné straně)
- solid – plný okraj
Jako u předchozích, i u této vlastnosti platí, že může obsahovat až 4 hodnoty s pořadím podle CSS modelu box.
div {
border-style: dashed;
}
Zaoblení rohů
Vlastnost border-radius (doslovně poloměr okraje), definuje jak moc bude zaoblen roh prvku. Může obsahovat jakoukoli číselnou hodnotu s relativní nebo absolutní jednotkou, přičemž větší zaoblení než 50 % nelze (lze, avšak nezobrazí se, jedná se o maximální hodnotu).
Vlastnost border-radius může obsahovat až čtyři hodnoty, na jejichž pořadí se vztahuje CSS model box.
div {
border-radius: 50%;
}
div {
border-radius: 10px 5px;
}