Bir web sayfasına içerik yerleştirilirken genellikle div, span gibi kutu özelliği olan ve sayfa üzerinde belirli bir yüzeyi kaplayan elemanlar kullanılır. Tablo ile web tasarımının modasının geçtiği şu günlerde, tasarımcılar sayfalarını "div" veya "span" gibi kutu elemanları ile hazırlamaktadırlar. Bu elemanlar CSS'nin verdiği sayısız özellikler sayesinde web tasarımcıların daha keliteli ve daha güzel görünümlü siteler tasarlamasına olanak sağlamıştır. Bu yazıda artık üçüncü versiyonu ile karşımıza çıkan CSS'nin tasarımcılara verdiği yeni bir imkandan bahsetmek istiyorum. CSS3 ile gelen "border-radius" kodu sayesinde artık tasarımcı hazırladığı web sayfasına köşeleri yuvarlatılmış HTML elemanları yerleştirebilir. Bunu bir örenek kod üzerinde gösterelim. Mesela bir "div" elemanı CSS3 sayesinde şu şekilde biçimlendirilebilir,
<div style="float:left; text-align:center; font-size:18px; background: #9CF; border:solid 5px #c1c6c7; border-radius: 55px 35px 20px 10px; padding:30px;">Köşeleri Yuvarlatılmış Div</div>
Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.
Köşeleri Yuvarlatılmış Div
İsterseniz benzer bir kodlama ile yuvarlak butonlar da yapabilrisiniz. Alın size bir örnek,
<input type="button" value="Yuvarlak buton" style="text-align:center; font-size:18px; color:#fff; background: #9CF; border-radius:10px; padding:5px;"/>
Bu kodlama da şu şekilde görüntülenir,
"border-radius" bu kodun standart halidir. Eğer yaptığınız kodlamanın diğer web tarayıcılarda da sorunsuz çalışmasını istiyorsanız Şu kodları da sayfanıza eklemelisiniz,
-moz-border-radius:55px 35px 20px 10px; / Firefox için /
-webkit-border-radius:55px 35px 20px 10px; /Safari ve Google Chrome için /
Burda verdiğiniz
ilk değer: sol-üst köşeyi,
ikinci değer: sağ-üst köşeyi,
üçüncü değer:sağ-alt köşeyi,
dördüncü değer:sol-alt köşeyi
yuvarlatmak için vermeniz gereken yarıçap değerleridir. Eğer yarıçap için tek bir değer girerseniz, tüm köşeler aynı değerde yuvarlatılır.
Son olarak "border-radius" kodu ile uymlu tarayıcı listesini de verelim.
Uyumlu tarayıcılar:
-----------------------------
Firefox 3.5 ve üzeri
Internet Explorer 9 ve üzeri
Netscape Navigator 3 ve üzeri
Opera 10.5 ve üzeri
Google Chrome 4.0 ve üzeri
Kaynak: Fatih Hayrioğlu