VISSZA
MENÜ
TOVÁBBMár a százalékos értékadás esetén is, ha az elem magassága vagy szélessége különbözött, akkor két különböző sugár által meghatározott ellipszisek alkották a sarkokat.
Használhatunk az elem sarkainál negyed ellipsziseket abban az esetben is, ha oldalai egyenlőek.
Bármely sarok lekerekítésénél megadható a vízszintes és a függőleges sugár értéke (ebben a sorrendben.)
A bal felső sarok sugarainak beállítása:
kijelölő
{
border-top-left-radius
:
érték
érték;
}
A jobb felső sarok sugarainak beállítása:
kijelölő
{
border-top-right-radius
:
érték
érték;
}
A jobb alsó sarok sugarainak beállítása:
kijelölő
{
border-bottom-right-radius
:
érték
érték;
}
A bal alsó sarok sugarainak beállítása:
kijelölő
{
border-bottom-left-radius
:
érték
érték;
}
Használható abszolút, relatív és százalékos értékmegadás.
Példa:
Forráskód
<style>
div { border:1px solid green;
width: 100px; height: 100px;
padding: 5px;}
#id_0 {border-top-left-radius: 56px 30px;
border-top-right-radius: 56px 30px;
border-bottom-right-radius: 56px 30px;
border-bottom-left-radius: 56px 30px;
}
#id_1 {border-top-left-radius: 30px 56px;
border-top-right-radius: 30px 56px;
border-bottom-right-radius: 30px 56px;
border-bottom-left-radius: 30px 56px;
}
#id_2 {border-top-left-radius: 30px 10px;
border-top-right-radius: 30px 10px;
border-bottom-right-radius: 30px 10px;
border-bottom-left-radius: 30px 10px;
}
#id_3 {border-top-left-radius: 50% 15%;
border-top-right-radius: 50% 15%;
border-bottom-right-radius: 50% 15%;
border-bottom-left-radius: 50% 15%;
}
</style>
...
<body>
<div id="id_0">56px 30px;</div>
<div id="id_1">30px 56px;</div>
<div id="id_2">30px 10px;</div>
<div id="id_3">50% 15%;</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_elipszis.html