Senin, 24 September 2012

Membuat Border Melengkung di Web


Untuk membuat rounded Corner sangatlah mudah sobat tinggal menghapalkan beberpa code di bawah ini.
-webkit-border-radius: ukuran;
-moz-border-radius: ukuran;

Contohnya Sebagai Berikut :


<html>
<head>
<style type="text/css">
#corner {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:#d81b21 solid;
width:200px;
}
</style>
</head>
<body>
<div id="corner">
-webkit-border-radius: 10px;<br>
-moz-border-radius: 10px;<br>
border:#d81b21 solid;<br>
</div>
</body>
</html>



Dan Jadinya Seperti Ini :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:#d81b21 solid;

Semakin besar radius yang soba berikan makan lengkungnya akan semakin dalam sebagai contoh kita tambahkan yang tadinya 10px menjadi 20px.

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border:#d81b21 solid;


itu untuk dasar membuat rounded corner, sekarang bagaimana jika kita ingin membuat garis lengkungnya cuma sebelah kanan saja

  Rounded Corner Sebelah kanan

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;
width:200px;


-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;


Rounded Corner Sebelah kiri

 -webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;



-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;




Tutorial CSS

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)