Cara Membuat Border pada Blog dan Jenis-jenis Border

Kali ini Saya akan membahas "Cara Membuat Border pada Blog dan Memberitahu Jenis-jenis Border"

Sebenernya Saya mengetahui dari teman.

Jadi daripada saya sendiri juga lupa, maka langsung deh saya posting disini. ma'lum tukang copas. wkwk.



Cara Membuat Border pada 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 dibwah yang sobat inginkan.
• Letakkan Teks Atau Kode yang ingin di Beri Border pada Tulisan warna biru
• Untuk penempatannya terserah sobat.

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 :

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 :

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 :

Selamat Mencoba !