Css Border Radius Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te border-radius özelliğini öğreneceğiz.border-radius özelliği ile html etiketlerinin köşelerini yuvarlak hale getirebiliriz.Değer verirken px veya % (yüzde) olarak veriyoruz.Üç adet <div> etiketi tanımlayalım ve px olarak border-radius değerleri verip tarayıcıdaki durumlarını inceleyelim.

css-dersleri-border-radius-kullanimi-1

Gördüğünüz gibi verdiğimiz değerlere göre köşelerin yuvarlaklığı değişiyor.Dikkat ederseniz değerler 4 köşeyede uygulanıyor.Sadece bir köşeye yuvarlaklık vermek istediğimizde şu dört özelliğide kullanabiliriz :

       ► border-top-left-radius

       ► border-top-right-radius

       ► border-bottom-right-radius

       ► border-bottom-left-radius

Dört adet <div> etiketi tanımlayıp bu özellikleri ayrı ayrı uygulayalım.

css-dersleri-border-radius-kullanimi-2

Gördüğünüz gibi her köşeye ayrı ayrı verebiliyoruz.

border-radius özelliği 1, 2, 3 veya 4 değer alabilir.Şimdi dört adet <div> etiketi tanımlayalım ve farklı durumlar üzerinden sonuçlarını inceleyelim.

1 – border-radius: 15px;  => Bu şekilde tek değer verilirse etiketin her köşesine 15px değeri uygulanır.

2 – border-radius : 15px 50px;  => Bu şekilde 2 değer verilirse etiketin,

yukarı-sol ve aşağı-sağ köşelerine 15px,
yukarı-sağ ve aşağı-sol köşelerine 50px değeri uygulanır.

3 – border-radius : 15px 50px 30px;  => Bu şekilde 3 değer verilirse etiketin,

yukarı-sol köşesine 15px,
yukarı-sağ ve aşağı-sol köşelerine 50px,
aşağı-sağ köşesine 30px değeri uygulanır.

4 – border-radius : 15px 50px 30px 5px;  => Bu şekilde 4 değer verilirse etiketin,

yukarı-sol köşesine 15px
yukarı-sağ köşesine 50px,
aşağı-sağ köşesine 30px,
aşağı-sol köşesine 5px değeri uygulanır.

css-dersleri-border-radius-kullanimi-3

İpucu : Bir etiketin tam yuvarlak olmasını istiyorsak yapmamız gerekenler :

1 – Etikete aynı genişlik ve yükseklik değerini vermek.

2- border-radius değerine 50% vermek.

css-dersleri-border-radius-kullanimi-4

Son olarak şunu da söyleyelim.border-radius özelliğine şu şekilde değerler verildiğini görebilirsiniz.

Bunun açılımı şu şekildedir.

Örneğin,

css-dersleri-border-radius-kullanimi-5

Gördüğünüz gibi köşeleri biraz daha farklı bir şekilde yuvarlamış olduk.

Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 19 – Box Sizing Nedir?

Sonraki : Css Dersleri 21 – Opacity Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +