border-bottom-right-radius Özelliği Temel Özellikler
- CSS Yazımı :
border-bottom-right-radius: <uzunluk> | <yüzde> {1,2}- Örnek :
border-bottom-right-radius: 7px;|border-bottom-right-radius: 7px 11px;- Öntanımlı Değer :
0- Uygulanabilen Etiketler :
- Tüm etiketler ancak kullanıcı ajanlarının
tableveinline-tableögelereborder-collapse: collapse;olduğunda uygulaması gerekmiyor. İç tablo etiketlerinin davranışı şuan için tanımsız.::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.borderBottomRightRadius = "13px";- Sürüm :
- CSS Backgrounds and Borders Module Level 3
- Açıklama :
border-bottom-right-radius Özelliği Kullanımı
Markanız için 300X300 alan.
CSS border-bottom-right-radius özelliğiyle etiketlerin sağ alk köşesi yuvarlanır.
border-bottom-right-radius özelliği ve diğer border-*-radius özellikleri, border-radius özelliği altında kısaltılabilir.
Daha fazla bilgi için border-radius özelliği sayfasına bakın.
border-bottom-right-radius Özelliği Yazımı
Uzunluk ya da yüzde değeri 1 ya da 2 kez girilir. 2 değerli yazımda değerler arasında bir boşluk bırakılır.
px ve % gibi ayrı ölçü birimlerinin aynı özellikte yoğun biçimde kullanıldığı CSS dosyaları tarayıcıları yorucaktır. Aynı özellik içinde ayrı birimleri kullanmaktan olabildiğince kaçının.
/* Köşe dairedir. */
/* border-bottom-right-radius: radyan; */
border-bottom-right-radius: 3px;
/* Yüzdelikli değerler */
border-bottom-right-radius: 20%;
/* Kutu kare ise daire ya da kutu dörtgen ise elipstir. */
border-bottom-right-radius: 40% 40%;
/* Yukarıdakinin aynısı: yatay(genişlik) ve dikey(yükseklik) değerlerinin %40'ı. */
border-bottom-right-radius: 40% 10%;
/* Yatal(genişlik) değerinin %40'si ve dikey(yükseklik) değerinin yüzde %10'u. */
/* Köşe elipstir. */
/* border-bottom-right-radius: yatay dikey; */
border-bottom-right-radius: 0.5em 1em;
/* Evrensel değerler */
border-bottom-right-radius: inherit; /* CSS3 */
border-bottom-right-radius: initial; /* CSS3 */
border-bottom-right-radius: revert; /* CSS3 */
border-bottom-right-radius: unset; /* CSS4 */border-bottom-right-radius Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 1 — 12 [3] 4 [1] 44 -webkit- [2]49 -webkit- |
10.5 | 3 -webkit-5 |
1 -webkit-4 |
9 |
| Yüzde Değer | 1 [4] 4 |
10.5 | 5 | 4 | 9 |
| Eliptik Köşeler | 3.5 | 10.5 | 3 | 1 | 9 |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var [3] | ? | ? | ? | ? |
| Yüzde Değer | Var | ? | ? | ? | ? |
| Eliptik Köşeler | Var | ? | ? | ? | ? |
[1] Firefox 50'den önce köşeleri yuvarlanma border-bottom-right-radius özelliğinde hep solid olarak işleniyordu ve bu hata Firefox 50'de düzeltildi.
[2] 44'üncü sürümden beri about:config'te layout.css.prefixes.webkit ayarı true olarak yapılandırılmış olmalı.
[3] -moz-border-radius-bottomright olarak desteklendi.
[4] Firefox 4'ten önce <yüzde> değeri yükseklik için belirlenen değer genişlik için de kullanılıyordu. Böylelikle tek değerli kullanımlarda -moz-border-radius-bottomright sürekli daire çizdiğinden hiç elips çizemedi.
border-bottom-right-radius Özelliğinin Alabileceği Değerler
<uzunluk>- Köşelerin uzunluğunu ayarlar.
<yüzde>- Köşelerin uzunluğunu yüzde (
%) değeri üzerinden ayarlar. Yatayda etiketin genişliği, dikeyde kutunun yüksekliği temel alınır.