CSS 3 ile Oval Köşeler Yaratmak

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

Bu özellik aşağıda ki browser (tarayıcı)'larda çalışmaktadır :

- Mozilla Firefox
- Google Chrome
- Safari

Ö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

Chrome ve Safari için ise:

-webkit-border-radius

Bunlar px ( pixel ) cinsinden değerler alırlar. ( Radius değeri px cinsinden olur )

Örnek:

-moz-border-radius: 5px;
-webkit-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. Oda şöyle oluyor;

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