Cara membuat sudut melengkung dengan CSS3

Membuat sudut melengkung (rounded corner ) menggunakan CSS itu mudah.

blok ini seharusnya mempunyai sudut melengkung

Kode untuk membuat sudut melengkung dengan CSS adalah border-radius. Sisipkan sintak border-radius pada class CSS yang dimaksud. Contoh :

.contoh {
display:block;
border-radius:20px;
background:#aaaaaa;
color:#ffffff;
padding:10px;


Berhubung masing-masing peramban web menerapkan baku yang berbeda maka kita harus menambahkan kode awalan agar didukung oleh masing-masing peramban.
-moz- untuk peramban Mozilla Firefox
-o- untuk peramban opera
-webkit- untuk peramban Chrome dan Safari

.contoh {
display:block;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px
background:#aaaaaa;
color:#ffffff;
padding:10px;


Untuk membuat sudut asimetris anda bisa menggunakan sintaks berikut

/* mozilla */
-moz-border-radius-topleft:15px; /* sudut kiri atas */
-moz-border-radius-topright:50px; /* sudut kanan atas */
-moz-border-radius-bottomleft:15px; /* sudut kiri bawah */
-moz-border-radius-bottomright:50px; /* sudut kanan bawah */
-moz-border-radius:10px 15px 15px 10px; /* ringkas ataskiri ataskanan bawahkanan bawahkiri */

/* chrome , safari */
-webkit-border-top-left-radius:15px; /* sudut kiri atas */
-webkit-border-top-right-radius:50px; /* sudut kanan atas */
-webkit-border-bottom-left-radius:15px; /* sudut kiri bawah */
-webkit-border-bottom-right-radius:50px; /* sudut kanan bawah */


mumulala

Selain untuk membuat sudut melengkung pada block juga bisa diterapkan untuk membuat sudut melengkung pada gambar.