Css Border Radius Kullanımı

Bu yazımızda Css’te Border Radius özelliğini nedir? Nasıl kullanılır? onu  öğ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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link