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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> div { width:150px; height:20px; background-color:cornflowerblue; margin:10px; padding:40px; } #box1 { border-radius: 10px; } #box2 { border-radius: 30px; } #box3 { border-radius: 50px; } </style> <div id="box1">border-radius : 10px;</div> <div id="box2">border-radius: 30px;</div> <div id="box3">border-radius: 50px;</div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> div { width:215px; height:20px; background-color:cornflowerblue; margin:10px; padding:20px; } #box1 { border-top-left-radius:50px; } #box2 { border-top-right-radius:50px; } #box3 { border-bottom-left-radius:50px; } #box4 { border-bottom-right-radius:50px; } </style> <div id="box1">border-top-left-radius:50px;</div> <div id="box2">border-top-right-radius:50px;</div> <div id="box3">border-bottom-left-radius:50px;</div> <div id="box3">border-bottom-right-radius:50px;</div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> div { width:230px; height:55px; background-color:cornflowerblue; margin:10px; padding:30px; } #box1 { border-radius:15px; } #box2 { border-radius:15px 50px; } #box3 { border-radius:15px 50px 30px; } #box4 { border-radius:15px 50px 30px 5px; } </style> <div id="box1">border-radius:15px;</div> <div id="box2">border-radius:15px 50px;</div> <div id="box3">border-radius:15px 50px 30px;</div> <div id="box3">border-radius:15px 50px 30px 5px;</div> |
İ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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> #box1 { width: 100px; height: 100px; background-color: cornflowerblue; border-radius: 50%; } </style> <div id="box1"></div> |
Son olarak şunu da söyleyelim. Border radius özelliğine şu şekilde değerler verildiğini görebilirsiniz.
|
1 2 3 |
border-radius: 40px / 20px; |
Bunun açılımı şu şekildedir.
|
1 2 3 4 5 6 |
border-top-left-radius: 40px 20px; border-top-right-radius: 40px 20px; border-bottom-right-radius: 40px 20px; border-bottom-left-radius: 40px 20px; |
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> #box1 { width: 100px; height: 100px; background-color: cornflowerblue; border-radius: 40px / 20px; } </style> <div id="box1"></div> |
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.
