Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Border-Radius ile Kenar Ovalleştirme Konusunu öğreneceğiz.
CSS'de herhangi bir ögenin kenarlarını ovalleştirmek veya yuvarlaklaştırmak için border-radius özelliği kullanılır.
CSS Border-radius kullanımı
CSS'de border-radius özelliği, bir ögenin köşelere ait ovalliğini tanımlanabilir.
#radius {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Yukarıdaki id değerine sahip etiketlerin kenarlarının ovalleştiğini göreceksiniz.
İpucu: border-radius özelliği aslında border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius özellikleri için bir kısa kullanımdır.
CSS'de belirli kenarları ovalleştirmek
CSS'de border-radius özelliği bir ila dört değere sahip olabilir. İşte bu kurallar:
4 Değer ile Kullanım
border-radius özelliğine sırası ile sol üst,sağ üst,sağ alt ve sol alt olmak üzere köşe değerlerini tek tek girebilirsiniz.
border-radius : 15px 50px 30px 5px;
3 Değer ile Kullanım
border-radius özelliğini 3 değer ile kullanabilirsiniz. Bu değerlerin ilki sol üst köşeyi, ikincisi sağ üst köşeyi , üçüncüsü ise sol alt ve sağ alt köşeleri temsil eder.
border-radius : 15px 50px 30px;
2 Değer ile Kullanım
border-radius özelliğini 2 değer ile kullanabilirsiniz. Bu değerlerin ilki sol üst ve sağ alt köşeleri, ikincisi ise sağ üst ve sol alt köşeleri temsil eder. Kısacası çapraz köşeleri temsil eder.
border-radius : 15px 50px;
