CSS kenarlığı sağ üst yarıçap Özellik
Örnek
İki <div> öğesinin sağ üst köşesine yuvarlak kenarlıklar ekleyin:
#example1 {
border: 2px solid red;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-top-right-radius: 50px
20px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik border-top-right-radius
, sağ üst köşenin yarıçapını tanımlar.
İpucu: Bu özellik, öğelere yuvarlak kenarlıklar eklemenize olanak tanır!
Varsayılan değer: | 0 |
---|---|
Miras: | Hayır |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.borderTopRightRadius="25px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit- veya -moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
border-top-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS Sözdizimi
border-top-right-radius: length|% [length|%]|initial|inherit;
Not: İki değer ayarlarsanız, birincisi üst kenarlık, ikincisi ise sağ kenarlık içindir. İkinci değer atlanırsa, ilkinden kopyalanır. Uzunluklardan biri sıfırsa, köşe yuvarlak değil karedir.
Mülk değerleri
Value | Description | Play it |
---|---|---|
length | Defines the shape of the top-right corner. Read about length units | |
% | Defines the shape of the top-right corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Yüzde olarak sağ üst köşeye yuvarlatılmış kenarlıklar ekleyin:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-top-right-radius: 40%;
}
İlgili Sayfalar
CSS eğitimi: CSS Yuvarlak Köşeler
HTML DOM referansı: borderTopRightRadius özelliği