Zaoblení okrajů bloku v CSS
Nyní se naučíme zaoblovat rohy
bloku. K tomu slouží
vlastnost border-radius, která přijímá
hodnotu v pixelech.
Co znamená, když jsme zadali zaoblení,
třeba 10px? Je to poloměr kruhu,
který lze do tohoto zaoblení vepsat. Pokud
vám matematika nejde a poslední věta vám není jasná - zapomeňte na ni a
jednoduše nastavujte zaoblení od oka. S
jistou praxí to není problém (měřicí
nástroj pro měření zaoblení neexistuje,
pokud o nějakém nevím).
Pojďme zaoblit rohy bloku nastavením
zaoblení na 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Podle vzoru opakujte stránku:
