Membuat Border Konten Dengan Css

Kali ini kita akan membahas mengenai pembuatan border konten dengan css, sebenarnya mudah, namun tidak ada salahnya berbagi, pembuatan border ini berfungsi sebagai pembatas konten sehingga lebih terlihat menarik dan rapih, namun perlu Anda ketahui setiab web browser memiliki script sendiri untuk dapat terbaca dan terbentuk sebuah border yang di inginkan, berikut sedikit tutorial pembuatan border :


Border dengan sudut border lancip :
Cukup dengan menambahkan Css :

 border: 2px solid #434343;

Border dengan sudut melengkung ( Rounded Corner ) :
Tambahkan Css :

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius:10px;

Sehingga menjadi :

 border: 2px solid #434343;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;

Border dengan beberapa sudut yang melengkung :
Tambahkan Css :
 Melengkung Di Sudut Kanan Atas :

-webkit-border-top-right-radius: 10px;

-moz-border-top-right-radius: 10px;

border-top-right-radius:10px;

Melengkung Di Sudut Kiri Atas :

-webkit-border-top-leftt-radius: 10px;

-moz-border-top-left-radius: 10px;

border-top-left-radius:10px;

Melengkung Di Sudut Kanan Bawah :

-webkit-border-bottom-right-radius: 10px;

-moz-border-bottom-right-radius: 10px;

border-bottom-right-radius:10px;

Melengkung Di Sudut Kiri Bawah :

-webkit-border-bottom-left-radius: 10px;

-moz-borderbottom-left-radius: 10px;

border-bottom-left-radius:10px;

Contoh :
Melengkung Di Sudut Kiri Atas dan Kanan Bawah :

 border: 2px solid #434343;
-webkit-border-top-leftt-radius: 10px; -moz-border-top-left-radius: 10px; border-top-left-radius:10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius:10px;

Pengaturan :
Teks warna hijau merupakan ukuran tebal border dengan satuan Px.
Teks warna biru merupakan jenis border, Contoh :

 border: 4px solid #434343;

 border: 4px double #434343;

 border: 4px ridge #434343;

 border: 4px dotted #434343;

 border: 4px dashed #434343;

 border: 4px groove #434343;

 border: 4px inset #434343;

 border: 4px outset #434343;

Dan teks warna kuning merupakan kode warna, untuk border.

Sekian dulu tutorial membuat border konten dengan Css.
Selamat Mencoba, Semoga Bermanfaat.