border-radius

border-radius kənarların (border, çərçivə) dairəvilik radiusunu müəyyənləşdirir, yəni kənarları ovallaşdırmaq üçün istifadə olunur. Əgər kənarlar yoxdursa, bu halda arxa fon ovallaşır.
 
Quruluşu: border-radius: <dəyər>
Aldığı dəyərlər: uzunluq dəyəri | % dəyəri | initial | inherit
Başlanğıc dəyəri: 0
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
 
border-radius 1-4 arası dəyər ala bilər. Əgər bir dəyər verilibsə, 4 küncə də tətbiq olunur. İki dəyər verilibsə, ilk dəyər sol üst və sağ alt küncə, ikinci dəyər isə sağ üst və sol alt küncə tətbiq olunur. Üç dəyər verilibsə, ilk dəyər sol üst küncə, ikinci dəyər sağ üst və sol alt küncə, üçüncü dəyər isə sağ alt küncə tətbiq olunur. Dörd dəyər verilibsə, növbə ilə sol üst, sağ üst, sağ alt və sol alt künclərə tətbiq olunur. 
 
Bundan başqa ikili dəyərdən istifadə edərək elliptik künclər yaratmaq mümkündür. Bunun üçün iki dəyər arasında / (sləş) simvolundan istifadə olunur. İlk dəyər üfüqi, ikinci dəyər isə şaquli radiusu təyin edir. Aşağıdakı 1-ci şəkildə adi qayda ilə verilmiş dəyərin nəticəsi, 2-ci şəkildə isə ikili olaraq verilmiş dəyərin nəticəsi göstərilmişdir.
 

border-radius

 
İndi nümunə ilə öyrəndiklərimizi aydınlaşdıraq.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Fon rəngi */
    border: 1px solid black; /* Çərçivə parametrləri */
    padding: 15px; /* Mətn ətrafı boşluq */
    margin-bottom: 10px; /* Aşağıdan boşluq */
   }
  </style>
 </head> 
 <body> 
  <div style="border-radius: 50px 0 0 50px;" class="radius">
   border-radius: 50px 0 0 50px;
  </div>
  <div style="border-radius: 40px 10px" class="radius">
   border-radius: 40px 10px;
  </div>
  <div style="border-radius: 10em/1em;" class="radius">
   border-radius: 10em/1em;
  </div>
  <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div style="border-radius: 8px;" class="radius">
   border-radius: 8px;
  </div>
 </body> 
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
  

border-radius

 

Göründüyü kimi, birinci halda (border-radius: 50px 0 0 50px;) 4 dəyərdən istifadə edərək, sol üst və sol alt radiusu 50 px etdik, qalan tərəflər isə 0px-dir.
İkinci halda isə (border-radius: 40px 10px;) 2 dəyərdən istifadə etdik. Beləcə sol üst və sağ alt radiusu 40px, sağ üst və sol alt isə 10 px-dir.
Üçüncü halda isə (border-radius: 10em/1em;) bir ədəd ikili dəyərdən istifadə etdik, beləcə hər tərəf göstərilən nisbətdə elliptik formalaşır.
Dördüncü halda isə (border-radius: 13em 0.5em/1em 0.5em;) sol üst və sağ alt 13em 1em, sağ üst və sol alt isə 0.5em dəyərində olacaqdır.
Beşinci halda isə (border-radius: 8px;) sadə olaraq bir dəyərdən istifadə etdik, beləcə hər 4 tərəf də 8px dəyərində olacaqdır.
Nəticəyə buradan da baxa bilərsiniz.
 
Bəzən tək tərəfə dəyər vermək üçün:
border-top-left-radius = üst sol künc
border-top-right-radius = üst sağ künc
border-bottom-left-radius = alt sol künc
border-bottom-right-radius = alt sağ künc
xüsusiyyətlərindən də istifadə edə bilərik. 

Məsələn:
border-radius: 2em;

əvəz etmək olar:

border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
 
və ya
 
border-radius: 2em 1em 4em / 0.5em 3em;

əvəz etmək olar:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
CSS3