Thursday, December 1, 2016
Cara membuat sudut melengkung dengan CSS3
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.
Available link for download
