Css3 Border Radius (Kenar yumuşatma) Ders 1
·
1 dakika okuma
·
12
Merhaba,
Css3 derslerimize başlıyoruz. İlk olarak border yapısına tekrar değineceğiz.
Mevcutta border yapısını kullandığımızda elementlerin kenarları köşeli olmaktadır. Dilersek Css3 kullanarak bu köşeleri ovalleştirebiliriz. Peki nasıl mı ?
Hemen bir örnek yapalım.
Div {
border: 1px solid #000000;
padding: 10px 20px;
background: #cccccc;
width: 300px;
border-radius: 15px;
}
Burada border-radius özelliği ovalliğin ne kadar olacağını söylemektedir. Değer 0 dan başlar ve yukarı doğru çıkar. İçerisinde tek satır yazı bulunacak bir div için maks değer 15- 20 iken 50 satırık bir yazı için 150 olabilir bu değeri görsel ihtiyacınıza göre kendiniz belirleyebilirsiniz.
Örnekte kullanılan kodun tamamı:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid #000000;
padding: 10px 20px;
background: #cccccc;
width: 300px;
border-radius: 20px;
}
</style>
</head>
<body>
<div>Buraya yazmak istediğimiz metni gireceğiz</div>
</body>
</html>
İyi Günler Dilerim, Bu yazıyı paylaş: