Css3 Border Radius (Kenar yumuşatma) Ders 1

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;

}

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>

<!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,

Css3 Border Radius (Kenar yumuşatma) Ders 1

Bunu beğen:

İlgili

Cevapla

Bir Cevap YazınCevabı iptal et

Son Yorumlar

Bunu paylaş:

Bunu beğen:

İlgili

Möglicherweise interessiert Sie:

Cevapla

Bir Cevap YazınCevabı iptal et

Etiketler

Son Yorumlar