A szegélyek segítségével lehetőség nyílik szabályos és szabálytalan geometriai alakzatok készítésére csupán css stílusdeklarációk felhasználásával.
A HTML elem háttérszínét és a keret színét azonosra állítjuk, így maga a keret „láthatatlanná” válik.
Példa:
Forráskód
<style>
div {border:1px solid green;
background-color: green;
color:#ffffff;
width: 150px; height: 100px;
padding: 8px;
text-align:center;}
#id_0 {border-radius: 50%; width: 100px;}
#id_1 {border-radius: 50%; }
#id_2 {border-radius: 100px; }
#id_3 {border-radius: 50px 50px 50px 0;}
#id_4 {border-radius: 100px 0 100px 0;}
</style>
...
<body>
<div id="id_0"><p> Kör</p></div>
<div id="id_1"><p> Ellipszis</p></div>
<div id="id_2"><p> Két oldalt félkör</p></div>
<div id="id_3"><p> Infő buborék</p></div>
<div id="id_4"><p> Falevél</p></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_alakzatok_1.html