Buat BOX ROUNDED CORNERS CSS3

Kali ini saya akan mencoba memberikan tips tentang membuat BOX  Rounded corners dengan CSS3. Walaupun cuma copas dari blog lain, tapi  mudah-mudahan bisa bermanfaat buat anda (hehehehehe...).

Rounded corners merupakan Box yang ujung-ujungnya berbentuk lengkung, biasanya box yang terdahulu selalu berbentuk kotak, tapi dengan menggunakan CSS3 kita bisa membuat ujung-ujung BOX tersebut menjadi lengkung, bahkan sampai bulat seperti bola.


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), danborder-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

Kode BOX 1 dan BOX 2

<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

Kode BOX 3 dan BOX 4

<style type="text/css"> #bgsGR_HzMenu {  margin: -10px 0 0 0;  padding: 7px 6px 0;  background: #222 url(http://i30.tinypic.com/2ue2vyp/bgsGR/images/bgGradV400.jpg) repeat-x 0 -99px;  <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

 
Kode BOX 5 dan BOX 6
 


<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

 
Kode BOX 7 
 


<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>