Home / Blogger Corner / Membuat Rounded Corner Agar Sudut Menjadi Tumpul

Membuat Rounded Corner Agar Sudut Menjadi Tumpul

Salam Sobat semua, Pernahkah Sobat Melihat sebuah kotak yang di Ujung sudutnya tumpul atau melengkung? Itu namanya “Rounded Corner”. “Rounded Corner” Biasanya di buat aga membuat sebuah tampilan kotak yang di modifikasi menjadi agak tumpul sudutnya, “Rounded Corner” Menggunakan sebuah CSS terbaru yaitu CSS3 , CSS3 Agak sedikit berbeda dalam Kode nya biasanya di awas sebuah kode ada [-] tetapi itu tidak jauh berbeda sih dalam CSSnya.

Sedikit cara yang Aku berikan, yaitu Bagaimana sih membuat sebuah Kotak dan di setiap sudut kotaknya itu tumpul atau melingkar? Inilah caranya Silahkan sobat Lihat di bawah ya.

Full rounded corner :


.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }

Rounded corner di kiri atas :


.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }

Rounded corner di atas :


.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

Rounded corner di bawah :

About admin

Check Also

Membuat Background Header Berganti Otomatis

Pada kali ini aku akan sedikit berbagi trik mempercantik atau bisa juga trik untuk memodifikasi …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *