CSS border-radius özelliği

Tanım ve kullanım

border-radius özelliği, dört border-*-radius özelliklerini ayarlamak için kullanılan kısayol özelliğidir.

İpucu:Bu özellik, elemente yuvarlak kenar çerçeve eklemenizi sağlar!

Ayrıca bakınız:

CSS3 Eğitimi:CSS3 Kenar

Örnek

div ögesine yuvarlak kenar çerçeve ekleyin:

div
{
border:2px solid;
border-radius:25px;
}

Deneyin

Daha fazla örnek sayfasının altında bulunur.

CSS dilbilgisi

border-radius: 1-4 length|% / 1-4 length|%;

Açıklama:Her bir yarıçapın dört değerini bu sırayla ayarlayın. Eğer bottom-left atlanırsa, top-right ile aynı olur. Eğer bottom-right atlanırsa, top-left ile aynı olur. Eğer top-right atlanırsa, top-left ile aynı olur.

Özellik değeri

Değer Açıklama Test
length Köşelerin şeklini tanımlar. Test
% Yüzde ile köşelerin şeklini tanımlar. Test

Örnek 1

border-radius:2em;

Eşdeğer:

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;

Eşdeğer:

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;

Teknik ayrıntılar

Öntanımlı değer: 0
Miras: hayır
Sürüm: CSS3
JavaScript dilbilgisi: object.style.borderRadius="5px"

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5