Web sitenizi hazırlarken navigasyonlarda, butonlarda ve diğer her şeyde kullanabileceğiniz yuvarlak köşeleri, photoshop’ta hazırlanan görseller yerine CSS3 ile gerçekleştirebilirsiniz. Border-radius kullanarak hazırlanan yuvarlak köşeler ile ilgili aşağıda birkaç örnek bulabilirsiniz.

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

.round1 {
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px;
}

CSS ile Yuvarlak Köşeler

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

.round2 {
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
border-top-left-radius: 20px;

-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
}

CSS ile Yuvarlak Köşeler

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.

.round3 {
-webkit-border-top-left-radius: 0px;
-khtml-border-radius-topleft: 0px;  
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;

-webkit-border-top-right-radius: 90px;
-khtml-border-radius-topright: 90px;
-moz-border-radius-topright: 90px;
border-top-right-radius: 90px;

-webkit-border-bottom-left-radius: 0px;
-khtml-border-radius-bottomleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 90px;
-khtml-border-radius-bottomright: 90px;
-moz-border-radius-bottomright: 90px;
border-bottom-right-radius: 90px;
}

CSS ile Yuvarlak Köşeler

Aynı mantıkla, daire oluşturmak da mümkün.

.round4 {
-webkit-border-top-left-radius: 100px;
-khtml-border-radius-topleft: 100px;    
-moz-border-radius-topleft: 100px;
border-top-left-radius: 100px;

-webkit-border-top-right-radius: 100px;
-khtml-border-radius-topright: 100px;
-moz-border-radius-topright: 100px;
border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;
-khtml-border-radius-bottomleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;
-khtml-border-radius-bottomright: 100px;
-moz-border-radius-bottomright: 100px;
border-bottom-right-radius: 100px;
}

CSS ile Yuvarlak Köşeler

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.