CSS ile Köşeleri Oval Yapma (Border-Radius Kullanımı) – Ahmet Cansever
Çarşamba , 26 Nisan 2017
Anasayfa » CSS » CSS ile Köşeleri Oval Yapma (Border-Radius Kullanımı)

CSS ile Köşeleri Oval Yapma (Border-Radius Kullanımı)

Bu yazımızda CSS ile border-radius ile kutu köşelerini veya istenilen bir etiketin köşelerini ovalleştiren bir örnek oluşturacağız. Örneğimizde border-radius kullanımının çeşitli yöntemlerini kullanacağız.

Örneğimize ait .html ve .css kodlarını vermeden önce oluşacak şekle göz atalım. (Resmin üzerine tıklayarak büyütebilirsiniz.)

css_border_radius_1
Örneğimizde kenar ovalleştirme yani radius-border işlemini tüm köşeler gibi yapılacağı gibi ayrı ayrı sol üst köşe, sağ üst köşe, sol alt köşe gibi yumuşatma işlemlerini gerçekleştirebileceğimizi görüyoruz. Ayrıca istersek görüleceği gibi img etiketine de uygulayarak resmin daire şeklinde kullanılabilmesini sağlayabiliriz.

border_ornek.html dosyasının içeriği:

border.css dosyası içeriği:

Hakkında Ahmet C

Yorum Yap

Wordpress Tema indir