A szegélyek lekerekítése sarkonként

A szegélyek lekerekítésének mértéke sarkonként is megadhatóak.

A bal felső sarok sugarának beállítása:

kijelölő

{

border-top-left-radius

érték;

}

A jobb felső sarok sugarának beállítása:

kijelölő

{

border-top-right-radius

érték;

}

A jobb alsó sarok sugarának beállítása:

kijelölő

{

border-bottom-right-radius

érték;

}

A bal alsó sarok sugarának beállítása:

kijelölő

{

border-bottom-left-radius

érték;

}

Használható abszolút, relatív és százalékos értékmegadás.

Példa:

Forráskód


<style>
      div  {border:5px solid green;
            width: 100px; height: 100px; 
            padding: 5px;} 
      #id_0 {border-top-left-radius: 10px;
             border-top-right-radius: 20px;
             border-bottom-right-radius: 30px;
             border-bottom-left-radius: 40px;}   
      #id_1 {border-top-left-radius: 10pt;
             border-top-right-radius: 20pt;
             border-bottom-right-radius: 30pt;
             border-bottom-left-radius: 40pt;}  
      #id_2 {border-top-left-radius: 2em;
             border-top-right-radius: 5em;
             border-bottom-right-radius: 10em;
             border-bottom-left-radius: 15em;}  
      #id_3 {border-top-left-radius: 10%;
             border-top-right-radius: 20%;
             border-bottom-right-radius: 30%;
             border-bottom-left-radius: 40%;}   
</style>     
….
<body>    
     <div id="id_0">px</div>  
     <div id="id_1">pt</div>
     <div id="id_2">em</div>  
     <div id="id_3">%</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_sarkonkent.html