Bu konuyla ilgili pek fazla Türkçe kaynak olmadığından, burada yazmak istedim. Konumuz; resim kullanmadan CSS3 ile yuvarlak köşeler oluşturmak. Yalnız bu yöntemin Internet Explorer’da çalışmadığını bilmelisiniz. ie burada da uyumluluğunu göstermiş.. Evet konuya geçelim. Şöyleki;

HTML yapı

<div id="kutu1">
buraya içerik geliyor.
</div>

Yukarıdaki gibi bir kutumuz var diyelim. Şimdi bu kutumuzun css özelliklerini belirleyelim. Çevresine bir çerçeve (border) atayalım ve bunların da yuvarlak köşeli olmasını sağlayalım.

CSS Stil yapısı

#kutu1 {
width:100px;
height:100px;
background-color:#ade2ad;
border:1px solid #000000;
/*Buradan itibaren köşeleri yuvarlak yapıyoruz.*/
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}

Yukarıdaki CSS ile bütün köşelere 10px yarıçapında yuvarlaklık verdim. Şimdi sadece iki üst köşeye uygulayalım. HTML yapımız yine aynı. CSS yapısı ise aşağıdaki gibi;

CSS Stil yapısı

#kutu1 {
width:100px;
height:100px;
background-color:#adcce2;
border:1px solid #000000;
/*İstediğimiz köşeye yuvarlaklık verebiliriz. Üst kenarlar*/
border-radius:10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-khtml-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}

Yukarıdaki CSS kodu ile, iki üst kenara yuvarlaklık veriyoruz. Bu örnekler çoğaltılabilir. Çeşitli yarıçap değerlerine sahip çok farklı yapıda köşeler oluşturabilirsiniz.

Yukarıdaki resimden de görüleceği üzere bir kaç değişik örnek yaptım. Kaynak dosyayı buradan indirebilirsiniz. Teşekkürler..