Salah satu pengembangan kode css border property dalam bentuk kode CSS 3 border radius atau sering disebut juga sebagai CSS-3 rounded corners telah mendapat dukungan dari hampir seluruh browser besar yang ada. Bahkan kode CSS3 border radius telah mengalami kemajuan dengan digunakannya satu deklarasi tunggal dalam bentuk border-radius:…px; .
Mulai pertengahan 2011 tak perlu lagi kita tuliskan -moz-border-radius:…px; (Mozilla Firefox) atau mungkin -webkit-border-radius:…px; (Safari dan Google Chrome).
Beberapa bentuk penulisan CSS3 border radius beserta DEMO bisa anda lihat di bawah. Jangan lupa letakkan cursor pada setiap box untuk melihat hasil bentuk box yang telah yang telah dilengkapi kode CSS3 border radius.
NAMUN, saya masih gagal untuk melakukan ini, namun tetap akan saya publish artikel ini yang saya dapat dari internet.
Untuk Blogger
1. Edit HTML2. Cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),dan letakkan kode CSS berikut ini di atas ]]></b:skin>
}Cara memakainya di kolom add HTML Code :
.borderhalus {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.borderhalus a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}
<div class='borderhalus'>
TEXT or CODE in HERE (bisa kode html iklan ataupun kode javascript dan sejenisnya)
</div>
Untuk Wordpress
CODE CSS3 Universal
Contoh salah satu ANIMATED CORNER BORDER for Text / Pics
.YUANRoundedCorners1{3. Untuk mengaktifkan effect tersebut, silahkan pilih / buat satu kode HTML.
height:320px;
width:320px;
border:2px solid #00C;
margin:40px auto;
border-radius:80px;
}
<div class="YUANRoundedCorners1"> TEXT or PICs HERE </div>
Kebanyakan dari website maupun blog yang beredar internet menerapkan style box pada setiap layout css-nya. Dengan demikian suatu keharusan bagi setiap web designer untuk memanfaatkan dan mempercantik website/blog saat menggunakan style box tersebut. Nah salah satu cara untuk membuat style box layout ini nampak lebih menarik dan menambahkan nilai estetika pada design web adalah dengan menggunakan teknik border radius.
Pada umumnya code css yang digunakan untuk membuat rounded corners adalah :
-moz-border-radius: 3px;
Berasal & untuk Mozilla dan digunakan pada Firefox
-khtml-border-radius: 3px;
Berasal & untuk Linux dan digunakan pada Konqueror
-webkit-border-radius: 3px;
Berasal & untuk Safari dan digunakan pada untuk mac dan windows
border-radius: 3px;
Yang ini hanya merupakan spesifikasi dari standard CSS3
Semua kode diatas digunakan untuk browser yang berbeda. Berikut ini beberapa contoh penerapannya agar semua browser bisa mendapat effect yang kita buat maka harus ditambahkan seperti ini :
Mulai pertengahan 2011 tak perlu lagi kita tuliskan -moz-border-radius:…px; (Mozilla Firefox) atau mungkin -webkit-border-radius:…px; (Safari dan Google Chrome)
.YuanRoundCorner1 {Untuk mengaktifkan effect tersebut, silahkan pilih / buat satu kode HTML
-webkit-border-bottomleft:5px;
-webkit-border-bottomright:5px;
-webkit-border-topleft:5px;
-webkit-border-topright:5px;
border-radius-bottomleft:5px;
border-radius-bottomright:5px;
border-radius-topleft:5px;
border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-khtml-border-radius-bottomleft:5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-topleft:5px;
-khtml-border-radius-topright:5px;
height:320px;
width:320px;
border:2px solid #00C;
margin:40px auto;
border-radius:40px 80px 120px 160px;
}
<div class="YuanRoundCorner1">
TEXT or PIC HERE </div>
Cara Manual :
<div style="border-radius: 40px 80px 120px 160px; border: 2px solid #00C; height: 320px; margin: 40px auto; width: 320px;">
TEST</div>
DEMO yang saya coba terapkan di blogger menjadi seperti ini, padahal seharusnya bergerak :
TEST
