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

A bal felső saroktól, az óramutató járásával egyező irányba haladva adhatjuk megy egymás után az egyes sarkok sugarát.

A bal felső, jobb felső, jobb alsó, bal alsó sarok sugarának beállítása:

kijelölő

{

border-radius

érték

érték;

}

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

1. példa:

Értékek: bal felső, jobb felső, jobb alsó, bal alsó sarok.

Forráskód


<style>
      div  {margin: 2px;float: left; border:5px solid green;
            width: 100px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 10px  20px 30px 40px;}
      #id_1 {border-radius: 10pt 20pt 30pt 40pt;}  
      #id_2 {border-radius: 2em 5em 10em 15em;}  
      #id_3 {border-radius: 10% 20% 30% 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*

2. példa:

Értékek: bal felső, jobb felső és bal alsó, jobb alsó sarok.

Forráskód


<style>
      div  {margin: 2px;float: left; border:5px solid green;
            width: 100px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 20px 30px 40px;}
      #id_1 {border-radius: 20pt 30pt 40pt;}  
      #id_2 {border-radius: 5em 10em 15em;}  
      #id_3 {border-radius: 20% 30% 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*

3. példa:

Értékek: bal felső és jobb alsó, jobb felső és bal alsó sarok.

Forráskód


<style>
      div  {margin: 2px;float: left; border:5px solid green;
            width: 100px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 20px 40px;}
      #id_1 {border-radius: 20pt 40pt;}  
      #id_2 {border-radius: 5em 15em;}  
      #id_3 {border-radius: 20% 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