HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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