Zaoblenie okrajov bloku v CSS
Teraz sa naučíme zaokrúhľovať rohy
bloku. Na to by sa mala použiť
vlastnosť border-radius, ktorá prijíma
hodnotu v pixeloch.
Čo znamená, že sme zadali zaoblenie,
napríklad na 10px? To je polomer kruhu,
ktorý možno vpísať do tohto zaoblenia. Ak
máte problémy s matematikou a nie je vám jasná
posledná veta - zabudnite na ňu a
jednoducho vyberajte zaoblenie od oka. Pri
určitej praxi to nie je problém (merací
nástroj na meranie zaoblení neexistuje,
prinajmenšom som o takom nepočul).
Poďme zaobliť rohy bloku nastavením
zaoblenia na 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Zopakujte stránku podľa uvedeného vzoru:
