CSS – Border Radius Özelliği

CSSNEDİR BU? :

Radius özelliği bir kutu, tablo vb. gibi şeylerin kenarlıklarını oval yapmak için kullanılır.

Türkçe olarak kenarlarını yuvarlak bir hâl aldırma diyebiliriz.

Ben genellikle PX cinsinden boyut belirtirim siz dilediğinizi kullanabilirsiniz.

Kullanım şekilleri fazladır ondan ayrı bir yazı oluşturma gereği duydum. J

Bildiğiniz üzere bir kutu(div) eklediğimizde kenarlık falan verdiğimiz de düz bir şekil alıyor ve biz bunun kenarlığını oval(yuvarlak) yapmak için aşağıdaki özellikleri kullanabiliriz;

1-)BORDER-RADIUS :

Tüm kenarlığı oval yapar.

Kullanım:

.border{

border:1px solid #333;

border-radius:5px;

}

BÖLGELERE GÖRE AYRI AYRI BORDER-RADIUS

Sadece istediğimiz kenarları oval yapmak için bu özelliği kullanabiliriz.

Bu özelliğin birçok kullanım şekilleri vardır bunları listelersek aşağıdaki gibi olur.

1-) ÜST KENARLIKLARI OVAL YAPMA

Sadece üst alandaki seçilen kenarlıkları oval yapmak için kullanılır. Bu özellik ikiye ayrılır Sol Üst , Sağ Üst diye bunları aşağıdaki gibi tanıtabiliriz.

A)Sol Üst Kenarlık Oval Yapma:

Sadece sol üst kenarı oval yapar.

Kullanım:

.border{

border:1px solid #333;

border-top-left-radius:5px;

}

B)Sağ Üst Kenarlık Oval Yapma:

Sadece sağ üst kenarı oval yapar.

Kullanım:

.border{

border:1px solid #333;

border-top-right-radius:5px;

}

1-) ALT KENARLIKLARI OVAL YAPMA

Sadece alt alandaki seçilen kenarlıkları oval yapmak için kullanılır. Bu özellik ikiye ayrılır Sol Alt , Sağ Alt diye bunları aşağıdaki gibi tanıtabiliriz.

A)Sol Alt Kenarlık Oval Yapma:

Sadece sol alt kenarı oval yapar.

Kullanım:

.border{

border:1px solid #333;

border-bottom-left-radius:5px;

}

B)Sağ Alt Kenarlık Oval Yapma:

Sadece sağ alt kenarı oval yapar.

Kullanım:

.border{

border:1px solid #333;

border-bottom-right-radius:5px;

}


 

Saygı ve Sevgi ile kalın…

Kürşad AYDIN