Macam-Macam Style/Jenis Border dengan Cara Membuatnya

Assalamualaikum agan-agan sekalian. Kali ini mari kita bahas tentang border. Mungkin, border sudah tidak asing lagi bagi para Sobat Blogger. Berikut ini penjelasan tentang border.



Border adalah garis tepi darisuatu objek. Berikut ini contoh-contoh style border yang didalamnya berupa "Code"nya. Berikut ini contohnya :



1. Solid

<div style="background:#F2F2F2;border:3px solid #000000; padding:5px;">
Tulisan Anda
</div>

2. Dashed

<div style="background:#F2F2F2;border:3px dashed #000000; padding:5px;">
Tulisan Anda
</div>

3. Dotted

<div style="background:#F2F2F2;border:3px dotted #000000; padding:5px;">
Tulisan Anda
</div>

4. Double

<div style="background:#F2F2F2;border:3px double #000000; padding:5px;">
Tulisan Anda
</div>

5. Groove

<div style="background:#F2F2F2;border:3px groove #000000; padding:5px;">
Tulisan Anda
</div>

6. Ridge

<div style="background:#F2F2F2;border:3px ridge #000000; padding:5px;">
Tulisan Anda
</div>

7. Inset

<div style="background:#F2F2F2;border:3px inset #000000; padding:5px;">
Tulisan Anda
</div>

8. Outset

<div style="background:#F2F2F2;border:3px outset #000000; padding:5px;">
Tulisan Anda
</div>

9. Rectangle

<div style="background:#F2F2F2;border:3px solid #000000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-ie-border-radius-bottomright: 5px;
-ie-border-radius-topleft: 5px;
-ie-border-radius-topright: 5px;
-ie-border-radius-bottomleft: 5px;
-ie-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
padding:5px;">
Tulisan Anda
</div>

Ket :
Border Rectangle tidak bisa bekerja pada IE (Internet Explorer)
Selamat Mencoba!!!