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 :


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





*Catatan
  • Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.
  • Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.
  • Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
  • Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Untuk itu silahkan Sobat Coba sendiri di Blog Sobat, Selamat mencoba dan Bermanfaat :D

5 Responses to "Membuat Rounded Corner Agar Sudut Menjadi Tumpul"

  1. nice info gan :). saya sudah praktekan ilmunya, berkunjung lg yah ke blog saya
    http://bisnisstylemagazine.blogspot.com/2011/09/kebijakan-yang-maju-kena-mundur-kena.html

    ReplyDelete
  2. terima kasih ilmunya :) saya sudah praktekan lagi :) jgn bosan untuk berkunjung yah
    http://bisnisstylemagazine.blogspot.com/2011/09/pre-order-blackberry9900-xl.html

    ReplyDelete