border-bottom-left-radius
Özelliği Temel Özellikler
- CSS Yazımı :
border-bottom-left-radius: <uzunluk> | <yüzde> {1,2};
- Örnek :
border-bottom-left-radius: 7px;
|border-bottom-left-radius: 7px 11px;
- Öntanımlı Değer :
0
- Uygulanabilen Etiketler :
- Tüm etiketler ancak kullanıcı ajanlarının
table
veinline-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.borderBottomLeftRadius = "13px";
- Sürüm :
- CSS Backgrounds and Borders Module Level 3
- Açıklama :
border-bottom-left-radius
Özelliği Kullanımı
Markanız için 300X300 alan.
CSS border-bottom-left-radius
özelliğiyle etiketlerin sol alt köşesi yuvarlanır.
border-bottom-left-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-left-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-left-radius: radyan; */
border-bottom-left-radius: 3px;
/* Yüzdelikli değerler */
/* Kutu kare ise daire ya da kutu dörtgen ise elipstir. */
border-bottom-left-radius: 20%;
/* Yukarıdakinin aynısı: yatay(genişlik) ve dikey(yükseklik) değerlerinin %40'ı. */
border-bottom-left-radius: 40% 40%;
/* Yatal(genişlik) değerinin %40'si ve dikey(yükseklik) değerinin yüzde %10'u. */
border-bottom-left-radius: 40% 10%;
/* Köşe elipstir. */
/* border-bottom-left-radius: yatay dikey; */
border-bottom-left-radius: 0.5em 1em;
/* Evrensel değerler */
border-bottom-left-radius: inherit; /* CSS3 */
border-bottom-left-radius: initial; /* CSS3 */
border-bottom-left-radius: revert; /* CSS3 */
border-bottom-left-radius: unset; /* CSS4 */
border-bottom-left-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-left-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-bottomleft
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-bottomleft
sürekli daire çizdiğinden hiç elips çizemedi.
border-bottom-left-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.