Jenis-jenis Border dan Cara Membuat Border di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kali ini Saya akan membahas Jenis-jenis Border dan Cara Membuat Border di Blog.
Bagi Saya border memang sangat berguna untuk membatasi script yang diletakkan pada blog agar tidak terlihat berantakan. Border juga bisa membuat blog menjadi bagus jika ditambah efek shadow, hover dengan transisi, dll. Berikut ini Saya ada Jenis-jenis Border dan Cara Membuat Border di Blog.

Contoh:

Teks atau sesuatu yang ingin diberi border 

Dibawah ini adalah kode CSS untuk membuat pada blog:

<div style="border: 3px solid rgb(0, 0, 0); padding: 4px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

Teks Atau Sesuatu yang Ingin Diberi Border

</div>

• Ganti tulisan yang berwarna merah dengan jenis border yang ada di bawah
• Letakkan teks atau kode yang ingin diberi border pada tulisan warna biru
• Untuk penempatannya terserah Anda.

Jenis-jenis Border:

Solid

Double

Ridge

Dotted

Dashed

Groove

Inset

Outset

Border dengan scroll, lebar dan tinggi:

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

CSS3 Border Radius (Collectively):

#CSS3 { border: 5px solid #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Hasil:

Contoh

CSS3 Border Radius (Individually):

#CSS3 {
border: 5px solid #000000; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px;
}

Hasil:

Contoh

CSS3 Border (Multipel):

#CSS3 {
border-width:5px; border-style:solid; -moz-border-top-colors:blue red orange green purple yellow; -moz-border-right-colors:blue red orange green purple yellow; -moz-border-bottom-colors:blue red orange green purple yellow; -moz-border-left-colors:blue red orange green purple yellow;
}

Hasil:

Contoh

Semoga artikel mengenai Jenis-jenis Border dan Cara Membuat Border di Blog bermanfaat untuk kalian.