CSS3 Rounded Corners: Cara Membuat dan Menuliskan Kode CSS3 Border Radius

Meskipun penulisan kode css rounded corners sudah teramat sering kita lihat dalam berbagai bentuk posting, namun kiranya tak ada salahnya jika kita mencoba untuk kembali mencoba mengupas bentuk dasar penulisan kodenya yang menggunakan CSS3. Disamping manusia jaman sekarang teramat pelupa, mungkin melalui posting ini beberapa manfaat bisa dipetik oleh para sobat blogger yang masih dalam tahap awal ngeblog ataupun yang mulai mencoba untuk mengenal lebih dalam tentang desain web/blog dan kode HTML.

Rounded corners sebenarnya adalah nama yang diberikan untuk box dengan sisi-sisi yang berbentuk lengkung. Jika sebelum CSS3 bentuk box lebih banyak hanya berupa kotak-kotak dengan sisi-sisi tanpa lengkungan, (atau lengkung dengan background gambar), berkat CSS3 maka sebuah box dengan sisi lengkung menjadi teramat mudah untuk membuatnya. Hingga saat ini hampir seluruh browser besar sudah mengaplikasikan CSS3 rounded corner terkecuali Internet Explorer (IE). Kode yang digunakanpun tidaklah terlalu jauh berbeda antara browser satu dengan yang lain. Perbedaan yang tidak terlalu mencolok ini membuat kita dengan mudah mengingat setiap kode di setiap browser. Kode dasar/standart untuk penulisan CSS3 rounded corners adalah border-radius: ..px; atau dalam satuan lain bisa dituliskan border-radius: ..em;. Satuan standar yang paling sering digunakan dalam penulisan kode HTML. Bila di antara sampeyan ada yang ingin mengetahui lebih dalam tentang perbedaan ke dua satuan ukuran ini, silahkan sampeyan bisa KLIK link di bawah ini (1em berkisar 18px).

Konversi px, em, pt dan %(persen)

Penulisan kode CSS Rounded Corners di beberapa browser mempunyai ciri tersendiri yang membedakan satu browser dengan browser yang lain.

1. Opera ♣ Kode yang digunakan adalah:
   border-radius: ..px;
2. Mozilla Firefox ♣ Kode yang digunakan adalah:
   -moz-border-radius: ..px;
3. Safari - Google Chrome ♣ Kode yang digunakan adalah:
   -webkit-border-radius: ..px;

Apabila penulisan kode dilakukan pada sisi-sisi yang berbeda pada ke-4 sisi sebuah box, maka penulisan di setiap browser akan ada sedikit perbedaan.

1. Opera ♣ Kode yang digunakan adalah:
   border-top-right-radius: ..px; right-top radius (kanan-atas),
   border-top-left-radius: ..px; left-top radius (kiri-atas),
   border-bottom-right-radius: ..px; right-bottom radius (kanan-atas), dan
   border-bottom-left-radius: ..px; left-bottom radius (kiri-bawah).
2. Mozilla Firefox ♣ Kode yang digunakan adalah:
   -moz-border-radius-topright: ..px; right-top radius (kanan-atas),
   -moz-border-radius-topleft: ..px; left-top radius (kiri-atas),
   -moz-border-radius-bottomright: ..px; right-bottom radius (kanan-atas), dan
   -moz-border-radius-bottomleft: ..px; left-bottom radius (kiri-bawah).
3. Safari - Google Chrome ♣ Kode yang digunakan adalah:
   -webkit-border-top-right-radius: ..px; right-top radius (kanan-atas),
   -webkit-border-top-left-radius: ..px; left-top radius (kiri-atas),
   -webkit-border-bottom-right-radius: ..px; right-bottom radius (kanan-atas), dan
   -webkit-border-bottom-left-radius: ..px; left-bottom radius (kiri-bawah).

Kode seperti tersebut di atas adalah bentuk kode dasar CSS3 rounded corners. Beberapa pengembangan dari kode dasar tersebut dapat dilakukan untuk membentuk sebuah lengkungan yang berbeda diantara setiap sisi. Di bawah ini adalah beberapa contoh bentuk rounded corners dan kode yang digunakan :

box-1
radius=1em

box-2
radius=25px

<style type="text/css">
.boks-1 {
 border:4px solid #990066;
 background:#66CCFF;
 width:200px;
 height:100px;
 float:left;
 margin:15px 10px;
 border-radius: 1em;
 -moz-border-radius: 1em;
 -webkit-border-radius: 1em;
 }
.boks-2 
 border:4px solid #990066;
 background:#66CCFF;
 width:200px;
 height:100px;
 float:left;
 margin:15px 10px;
 border-radius: 25px;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 }
</style>
 
<div class="boks-1">boks-1 : radius=1em</div> 
<div class="boks-2">boks-2 : radius=25px</div>

box-3
radius-top-right=10px

boks-4
radius-top-left=40px
radius-bottom-left=15px

<style type="text/css">
.boks-3 {
 border:4px double #990066;
 background:#66CCFF;
 width:190px;
 height:100px;
 margin:15px 10px;
 border-top-right-radius: 10px;
 -moz-border-radius-topright: 10px;
 -webkit-border-top-right-radius: 10px;
 }
.boks-4 
 border:4px inset #990066;
 background:#66CCFF;
 width:190px;
 height:100px;
 float:right;
 margin:15px 10px;
 border-top-left-radius: 40px;
 border-bottom-left-radius: 15px;
 -moz-border-radius-topleft: 40px;
 -moz-border-radius-bottomleft: 15px;
 -webkit-border-top-left-radius: 40px;
 -webkit-border-bottom-left-radius: 15px;
 }
</style>
 
<div class="boks-1">boks-3 : radius-top-right=10px</div> 
<div class="boks-2">boks-4 : radius-top-left=40px, radius-bottom-left=15px</div>

box-6
radius=10px 25px

box-5
radius=2em 0.5em

<style type="text/css">
.boks-5 {
 border:4px ridge #990066;
 background:#66CCFF;
 width:190px;
 height:100px;
 margin:15px 10px;
 border-radius: 10px 25px;
 -moz-border-radius: 10px 25px;
 -webkit-border-radius: 10px 25px;
 }
.boks-6 
 border:4px outset #990066;
 background:#66CCFF;
 width:190px;
 height:100px;
 float:right;
 margin:15px 10px;
 border-radius: 2em 0.5em;
 -moz-border-radius: 2em 0.5em;
 -webkit-border-radius: 2em 0.5em;
 }
</style>
 
<div class="boks-1">boks-5 : radius=10px 25px</div> 
<div class="boks-2">boks-6 : radius= 2em 0.5em</div>

box-7
radius=100px
width=180px, height=180px
border=10px

<style type="text/css">
.boks-7 {
 border:10px ridge #990066;
 background:#66CCFF;
 width:180px;
 height:180px;
 border-radius: 100px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 }
</style>
 
<div class="boks-1">boks-7 : radius=100px</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «