css de Resimsiz oval koseler

CSS 3 ile hiç resim kullanmadan düz köşeleri oval hale getirebileceğinizi biliyor muydunuz?

Baştan uyarayım arkadaşlar, css 3 kullanarak oval köşeler yaparsanız şu tarayıcılarda düzgün olarak gözükür:

- Mozilla Firefox
- Google Chrome
- Safari

Razıysanız derse geçelim. Öncelikle oval köşeler yapmak için iki ayrı kod kullanacağız çünkü firefox ile safari'nin algıladıkları kodlar farklı. ( Chrome ve Safari aynı CSS altyapısını kullandığı için, ikisinde bir kodla oval köşeler oluşturabiliyoruz. )

Firefox'ta oval köşeler için aşağıdaki kodu kullanıyoruz:
-moz-border-radius

Bunlar px cinsinden değerler alırlar. ( Radius değeri px cinsinden olur çünkü ) Örnek:
-moz-border-radius: 5px;

Tabi isterseniz her köşe için tek tek değerler atayabilirsiniz. 4 köşe için ayrı ayrı kodu kullanmak isterseniz:
-moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius


Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:

- top: üst
- bottom: alt
- left: sol
- right: sağ

Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız:

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

Bir dersimiz daha bitti. Hoşçakalın...