A szegélyek lekerekítése

A szegélyek sarkai a border-radius tulajdonság segítségével lekerekíthető. Paraméterként a szegély külső szélének sugarát kell megadni.

A lekerekítés sugarának beállítása:

kijelölő

{

border-radius

érték;

}

Négyzet alakú elem esetén a szegély, akkor válik kör alakúvá, amikor a sugár értéke = height / 2 + padding + border-width

Példa:

Forráskód


<style>
      div  {border:5px solid green;
            width: 50px; height: 50px;
            padding: 5px;} 
      #id_0 {border-radius:5px;}   
      #id_1 {border-radius:10px;} 
      #id_2 {border-radius:15px;} 
      #id_3 {border-radius:20px;} 
      #id_4 {border-radius:25px;} 
      #id_5 {border-radius:30px;}
      #id_6 {border-radius:35px;} 
      #id_7 {border-radius:40px;} 
      #id_8 {border-radius:50px;}  
</style>     
...
<body>    
     <div id="id_0">5px</div>  
     <div id="id_1">10px</div>
     <div id="id_2">15px</div>  
     <div id="id_3">20px</div>
     <div id="id_4">25px</div>  
     <div id="id_5">30px</div>
     <div id="id_6">35px</div>  
     <div id="id_7">40px</div>
     <div id="id_8">50px</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_1.html