CSS border-radius Özellik
Örnek
İki <div> öğesine yuvarlatılmış köşeler ekleyin:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik border-radius
, elemanın köşelerinin yarıçapını tanımlar.
İpucu: Bu özellik, öğelere yuvarlatılmış köşeler eklemenizi sağlar!
Bu özellik bir ila dört değere sahip olabilir. İşte kurallar:
Dört değer - sınır yarıçapı: 15px 50px 30px 5px; (birinci değer sol üst köşeye, ikinci değer sağ üst köşeye, üçüncü değer sağ alt köşeye ve dördüncü değer sol alt köşeye uygulanır):
Üç değer - sınır yarıçapı: 15px 50px 30px; (birinci değer sol üst köşeye, ikinci değer sağ üst ve sol alt köşelere ve üçüncü değer sağ alt köşeye uygulanır):
İki değer - border-radius: 15px 50px; (ilk değer sol üst ve sağ alt köşeler için geçerlidir ve ikinci değer sağ üst ve sol alt köşeler için geçerlidir):
Bir değer - sınır yarıçapı: 15 piksel; (değer, eşit olarak yuvarlatılmış dört köşenin tümü için geçerlidir:
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.borderRadius="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-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS Sözdizimi
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Not: Her yarıçap için dört değer sol üst, sağ üst, sağ alt, sol alt sırayla verilmiştir. Sol alt atlanırsa, sağ üst ile aynıdır. Sağ alt atlanırsa, sol üst ile aynıdır. Sağ üst atlanırsa, sol üst ile aynıdır.
Mülk değerleri
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners 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
Arka plan rengine sahip bir öğe için yuvarlatılmış köşeler ayarlayın:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Örnek
Kenarlıklı bir öğe için yuvarlatılmış köşeler ayarlayın:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Örnek
Arka plan görüntüsü olan bir öğe için yuvarlatılmış köşeler ayarlayın:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Örnek
Şuna da dikkat edin:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
border-radius: 2em 1em 4em / 0.5em 3em;
}
/* is equivalent to:
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; */
İlgili Sayfalar
CSS eğitimi: CSS Yuvarlak Köşeler
HTML DOM referansı: borderRadius özelliği