Yuvarlak veya oval köşeli butonlar, resimler, alanlar oluşturmak için imajlara ihtiyacınız yok. Div kenarlarını, köşelerini, tabloları yuvarlak yapabilmenin en pratik yolu CSS. CSS3 ile bir resmin köşesini bile yuvarlak yapabilirsiniz. Aşağıdaki kodlar Google Chrome, Mozilla Firefox, Internet Explorer, Safafri ve Opera gibi birçok tarayıcıda destekleniyor artık. Border-radius kullanarak hazırlanan yuvarlak köşeler ile ilgili aşağıda birkaç örnek bulabilirsiniz. Bu örnekleri kendi tasarımlarınıza göre düzenleyerek kullanabilirsiniz.

CSS border-radius

Dört köşeyi de yuvarlatmak için aşağıdaki kodlar kullanılır.

Yalnızca sol üst ve sağ alt yuvarlak olsun diyorsanız aşağıdaki kodlar kullanılır.

Genel mantık, eğer dört köşeyi aynı anda aynı değerde yuvarlatmak yerine, köşeye özel css uygulayabiliyoruz. Sol tarafı köşeli bırakıp sağ tarafı yuvarlaklaştırmak da mümkün.

Görüldüğü gibi spesifik bir köşeye yuvarlak uygulamak istediğiniz zaman border-top-left-radius, border-top-right-radius, border-bottom-left-radius ve border-bottom-rigt-radius değerlerini kullanıyoruz.

Bu kodlar dışında internette online olarak yuvarlak köşe oluşturma siteleri bulunuyor. Bunlardan biri border-radius.com. Bu sitede gireceğiniz değerler ile bir div ya da resminizin köşelerini yuvarlak yapmanın kodlarını otomatik olarak alabilirsiniz.

CSS ile Resmi Yuvarlak Yapma

Web sitenize koyduğunuz bir imajı ya da bir avatarı yuvarlak yapmak isterseniz, bunu Photoshop’a ihtiyaç olmadan CSS ile yapmanız mümkün. Bir alanı CSS ile yuvarlak yapmak için yine yukarıdaki kodlardaki mantıkta ilerlememiz gerekiyor. Örneğin bir profil imajını yuvarlak yapacağımızı düşünelim.

Bu görseli yuvarlak yapmak için aşağıdaki kodu style.css dosyasına yerleştirmemiz yeterli.

border-radius değerini yuvarlak olarak belirlememiz için dikkat etmemiz gereken şey, alanın genişliği 200px ise yuvarlak olması için yarısı değerinde piksel değeri girmemiz gerektiği. 200px çapı olan bir alanın yuvarlak olması için border-radius değeri 100px olmalı.