CSS3 ile Yuvarlak Kenarlı Kutu Yapımı

Genel olarak bir şekilde dört köşe olduğunu düşünürsek, köşeleri yuvarlama işlemi için şu sırayı takip ederiz: 'Üst Sol' 'Üst Sağ' 'Alt Sağ' 'Alt Sol'
Örnek Kullanımı

-webkit-border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
border-radius:0px 10px 10px 0px;

---

Üst Sol Köşe: 0px, Üst Sağ Köşe: 10px, Alt Sağ Köşe: 10px, Alt Sol Köşe: 0px olacak şekilde bir şekil oluşturalım.
Border Radius Örnek 1

<div class="ornek_sekil"></div>

<style>
.ornek_sekil{width:100px;height:140px;border-radius:0px 10px 10px 0px;background-color:blue;}
</style>

Border Radius Örnek 1

---

Üst Sol Köşe: 60px, Üst Sağ Köşe: 0px, Alt Sağ Köşe: 20px, Alt Sol Köşe: 0px olacak şekilde bir şekil oluşturalım.
Border Radius Örnek 2

<div class="ornek_sekil"></div>

<style>
.ornek_sekil{width:100px;height:140px;border-radius:60px 0px 20px 0px;background-color:red;}
</style>

Border Radius Örnek 2

---

Border radius işleminin güzelliklerinden birisi de tamamen yuvarlak bir şekil oluşturabilmemizdir. Bunun için radius değerlerine px değil de % değerleri vermemiz gerekmektedir.
Üst Sol Köşe: 50%, Üst Sağ Köşe: 50%, Alt Sağ Köşe: 50%, Alt Sol Köşe: 50% olacak şekilde değerler verip yuvarlak oluşturalım.
Border Radius Örnek 3

<div class="ornek_sekil"></div>

<style>
.ornek_sekil{width:100px;height:100px;border-radius:50% 50% 50% 50%;background-color:brown;}
</style>