border-radius Özelliği Temel Özellikler
- CSS Yazımı :
border-radius: <uzunluk> | <yüzde> {1,4} [<uzunluk> | <yüzde> {1,4}]- Örnek :
border-radius: 7px;|border-radius: 7px 13px 7px;|border-radius: 3px 5px 7px / 13px 11px;- Öntanımlı Değer :
-
border-top-left-radiusÖzelliği- Sol üst köşe,
0 border-top-right-radiusÖzelliği- Sağ üst köşe,
0 border-bottom-left-radiusÖzelliği- Sağ alt köşe,
0 border-bottom-left-radiusÖzelliği- Sol alt köşe,
0
- Uygulanabilen Etiketler :
- Tüm Etiketler.
::first-letterögesine de uygulanabilir. - Kalıtsallık :
- Yok
- Tarayıcı Desteği :
- Tüm Tarayıcılar
- Animasyon :
- Destekleniyor
animationÖzelliği - Javascript :
öge.style.borderRadius = "13px";- Sürüm :
- CSS Backgrounds and Borders Module Level 3
- Açıklama :
border-radius Özelliği Kullanımı
Markanız için 300X300 alan.
CSS border-radius özelliği aslında border-*-radius özelliğinin kısaltmasıdır. CSS border-radius özelliğinin kullanılmasıyla etiketlerin köşeleri yuvarlanır.
border-radius Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 1 — 12 -moz-42 [3] |
10.5 [4] | 3 -webkit-5 [1] |
1 -webkit-4 [1] |
9 |
| Eliptik Köşeler | 3.5 | Var | Var [6] | Var [5] | Var |
| 4 Değerli Yazım | Var | Var | 5 | 4 | Var |
| Yüzdelik Değerler | 4 [8] | 11.5 [9] | 5.1 [7] | Var [7] | Var |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var [2] | ? | Var | 2.1 -webkit- |
? |
| Eliptik Köşeler | Var | Yok | ? | ? | ? |
| 4 Değerli Yazım | Var | Yok | ? | ? | ? |
| Yüzdelik Değerler | Var | Yok | Var [7] | Var [7] | ? |
[1] Anki Safari ve Chrome tarayıcıları <select> etiketi'nde -webkit-appearance özelliği uygun bir değer tutmadığı sürece görmezden geliniyor.
[2] Firefox 50'den önce yuvarlak köşeler hep border-style: solid; gibiymiş gibi işleniyordu ve bu hata Firefox 50'de düzeltildi.
[3] Firefox 4 CSS3 ölçünlerine uymak amacıyla yüzdelik değerlerin işlenmesini değiştirdi. border-radius: 50%; ile herhangi bir boyuttaki etiketin çerçevesi elips yapılabilir. Firefox 4'teki yuvarlak köşeler ayrıca içeriği ve görselleri kırpar eğer overflow: visible; değil ise.
[4] Opera 11.60'tan önce, değiştirilmiş etiketlerde border-radius yuvarlak köşeleri sağlamıyordu.
[6] Chrome 4'ten önce / kullanımı desteklenmiyordu. Eğer iki değer kullanılırsa 4 köşe de elips oluyordu. -webkit-border-radius: 40px 10px;; border-radius: 40px/10px;'e denktir.
[6] Safari 4.1'den önce / kullanımı desteklenmiyordu. Eğer iki değer kullanılırsa 4 köşe de elips oluyordu. -webkit-border-radius: 40px 10px;; border-radius: 40px/10px;'e denktir.
[7] Yüzdelik değerler Safari ve Chrome tarayıcılarının eski sürümlerinde desteklenmiyordu. Bu durum eylül 2010'da düzeltildi.
[8] Firefox 4'ten önce yüzdelik değerler ayrı bir biçimde yorumlandı. Hey yatay hem de dikey radyan değerleri border-box'a göre işlendi.
[9] Opera 11.5'ten önce yüzdeli değerlerin işlenmesi sorunluydu.
border-radius Özelliğinin Alabileceği Değerler
<uzunluk>- Köşelerin yuvarlanma uzunluğunu ayarlar.
<yüzde>- Köşelerin yuvarlanma uzunluğunu yüzde (
%) değeri üzerinden ayarlar. Yatayda etiketin genişliği, dikeyde kutunun yüksekliği temel alınır.
border-radius: 17px 13px 23px / 11px 27px;
İlk değerler yatay ikinci değerler ise dikey değerlerdir.
Eğer ikinci değerler, /'den sonrakiler, girilmediyse ilk değerlere eşit oldukları var sayılır.
Eğer her iki değer de girilmediyse 0 var sayılırlar ve köşeler yuvarlanmaz.
Yatayda ve dikeyde değerlerin farklı verilmesiyle (okuduğunuz bu kutunun köşelerine dikkat edin), köşeler düzgün bir biçimde yuvarlanmak yerine yumurtamsı yani eliptik köşeler elde edilebilir.
Tüm değerler yukarı-sol, yukarı-sağ, aşağı-sağ, aşağı-sol olarak veriliyor.
Ysol Ysag Asağ Asol
Eğer aşağı-sol verilmezse, aşağı-sol yukarı-sağa eşit var sayılır.
Eğer aşağı-sağ verilmezse yukarı-sola eşit var sayılır.
Eğer yukarı-sol verilmezse yukarı-sağa eşit var sayılır.
border-radius:13px; = border-radius:13px 13px 13px 13px;
/* Aynı zamanda : */
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
border-bottom-left-radius: 13px;border-radius: 5px 3px 11px / 1px 7px;
/* Aynı zamanda : */
border-top-left-radius: 5px 1px;
border-top-right-radius: 3px 7px; /* ( Yukarı-sağ )*/
border-bottom-right-radius: 11px 1px;
border-bottom-left-radius: 3px 7px; /* ( Aşağı-sol'un değeri Yukarı-sağ'dan geldi ! ) */