Ha egy négyzet esetén a kerekítés sugarát százalékban adjuk meg, akkor a 100% megegyezik a négyzet egy oldalának hosszával. 50% beállítása esetén kör alakú lesz a szegély.
Téglalap esetén a sarkokon körcikk helyett negyed ellipszis lesz a kerekítés eredménye.
A függőleges sugár számításának alapja: height + 2*padding + 2*border-width
A vízszintes sugár számításának alapja: width + 2*padding + 2*border-width
50% beállítása esetén ellipszis alakú lesz a szegély.
A lekerekítés sugarának beállítása:
kijelölő
{
border-radius
:
érték%;
}
1. példa:
Forráskód
<style>
div { border:1px solid green;
width: 100px; height: 100px;
padding: 5px;}
#id_0 {border-radius: 10%;}
#id_1 {border-radius: 40%;}
#id_2 {border-radius: 50%;}
#id_3 {border-radius: 60%;}
</style>
...
<body>
<div id="id_0">10%;</div>
<div id="id_1">40%;</div>
<div id="id_2">50%;</div>
<div id="id_3">60%</div>
</body>
Eredmény*
2. példa:
Forráskód
<style>
div { border:1px solid green;
width: 200px; height: 100px;
padding: 5px;}
#id_0 {border-radius: 10%;}
#id_1 {border-radius: 40%;}
#id_2 {border-radius: 50%;}
</style>
...
<body>
<div id="id_0">10%;</div>
<div id="id_1">40%;</div>
<div id="id_2">50%;</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_kerekit_szazalek.html