Örnek
Bir yuvarlanmış kenarlar ekleyin <div> elemanı:
div
{
border: 2px solid;
border-radius: 25px;
}
Kendin dene " Tanımı ve Kullanımı
* - - yarıçap özellikleri border-radius özelliği dört sınır ayarlamak için bir kestirme niteliktir.
Tip: Bu özellik size unsurlara yuvarlak sınırları eklemek için izin verir!
| Varsayılan değer: | 0 |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.borderRadius="25px" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
| özellik | |||||
|---|---|---|---|---|---|
| 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: Note: Her yarı çapları dört değerleri sırayla üst taraftaki sağ üst, sağ alt, sol alt verilmiştir. sol alt atlanırsa o sağ üst aynıdır. Sağ alt atlanırsa üst-solda aynıdır. Sağ üst atlanırsa üst-solda aynıdır. Mülkiyet Değerler
değer Açıklama Oynat length köşe şeklini tanımlar. Varsayılan değeri 0'dır Oynat " % % köşelerde şeklini tanımlar Oynat " initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun Oynat " inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Örnek 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Örnek 2
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
CSS3 öğretici: CSS3 Sınırlar
HTML DOM referansı: borderRadius property