Szegély kerekítése ellipszissel 2

A sarkok sugarainak beállítása (vízszintes/függőleges):

Értékek: Vízszintes - bal felső, jobb felső, jobb alsó, bal alsó sarok. / Függőleges - bal felső, jobb felső, jobb alsó, bal alsó sarok

kijelölő

{

border-radius

érték

érték;

}

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

1. példa:

Forráskód


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

2. példa:

Forráskód


<style>
      div  { border:3px solid green;
            width: 200px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 20px 30px 40px / 50px 40px 10px;}  
      #id_1 {border-radius: 10% 30% 50% / 15% 15% 15% ;} 
</style>  
...
<body>    
     <div id="id_0">Első;</div>  
     <div id="id_1">Második;</div>
</body>

Eredmény*

3. példa:

Forráskód


<style>
      div  { border:3px solid green;
            width: 200px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 40px 10px / 40px 10px;}            
      #id_1 {border-radius: 10% 50% / 15% 15% ;}   
</style>  
...
<body>    
     <div id="id_0">Első;</div>  
     <div id="id_1">Második;</div>
</body>

Eredmény*

4. példa:

Forráskód


<style>
      div  { border:3px solid green;
            width: 200px; height: 100px; padding: 5px;}
      #id_0 {border-radius: 40px / 20px;}            
      #id_1 {border-radius:  50% / 15%  ;}     
</style>  
...
<body>    
     <div id="id_0">Első;</div>  
     <div id="id_1">Második;</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_1.html