Penerapan CSS3 Properti border-radius

Ok gan, kita jumpa lagi dalam artikel ini. Pada kali ini saya akan membahas tentang properti border-radius yang terdapat pada CSS3, untuk itu coba anda buat kode berikut:

<style>
.box    {
    border:solid thin : #009900;
    background       : #00cc00;
    color                 : white;
    text-align           : center;
}
</style>
<div class=’box’>border biasa</div>

Jika anda menjalankan script tersebut pada browser, maka anda akan mendapatkan tampilan betnuk kotak seperti pada gambar berikut:

Nah dengan properti border radius pada CSS3, anda dapat membuat lengkungan (radius) pada setiap sudut kotak tersebut. Secara umum, penggunaan properti border-radius dapat anda tuliskan seperti berikut:

"border-radius    :nilai;"    (tanpa kutip)

Untuk mengisi nilai border-radius, anda dapat menggunakan satuan pixel atau em, misalnya seperti 5px atau 3em. Contohnya seperti script berikut:

<style>
.box    {
Border-radius      : 5px;     border:solid thin : #009900;
    background     : #00cc00;
    color               : white;
    text-align         : center;
}
</style>
<div class=’box’>border biasa</div>

Jika anda menjalankan kode tersebut pada browser, maka akan mendapatkan tampilan kotak dengan sudut tumpul seperti dibawah ini:

Sebagai tambahan, agar properti dapat berjalan disemua browser, anda bisa membuat menjadi seperti berikut:

<style>
.box    {
-webkit- border-radius      : 5px;  // untuk membuat radius untuk browser selain firefox
-moz- border-radius      : 5px;  // untuk membuat radius pada mozila firefox
border-radius      : 5px;
    border:solid thin : #009900;
    background      : #00cc00;
    color          : white;
    text-align      : center;
}
</style>
<div class=’box’>border biasa</div>

Nah, sekarang anda sudah sedikit mengerti penggunaan properti border-radius ini kan??
Untuk menentukan Radius pada tiap sudut tertentu silahkan klik link berikut :
Menentukan Radius untuk Sudut Tertentu.
Salam

TCindent Naturalisi

Tweet