Menulis Css Border Warna Lebih Singkat

Border style termasuk bahan pokok dalam membangun template blog, apa ada membuat themes blog tanpa border, kasi tau ga yaaaaaaa :idea:
penulisan border yang di gunakan juga bermacam-macam sebut saja solid, dashed, ridge, double, groove, inset, outset dan dotted itulah nama-nama border :D

Inti dari tulisan ini yaitu pada penulisan border warna dengan css, berikut jenis-jenis penulisan border css

.selector { border: 2px dotted black;}

Css diatas akan menghasilkan bidang dengan garis putus-putus setiap sisi berwarna hitam

.selector { border-top: 2px solid red; border-right: 2px solid yellow; border-bottom: 2px solid gray; border-left: 2px solid blue; }

Css diatas akan menghasilkan bidang dengan garis setiap sisi warna-warni

Nah border warna inilah inti dari postingan ini ( akhirnya ketemu juga inti dari artikel ini, dari tadi kek ) penulisan yang panjang itu dapat disingkat seprti ini

.selector { border-color: red yellow gray blue;

border-style: solid;

border-width: 2px;

Gimana lebih iritkan cssnya: ( perasaan sama aja deh ) klo ga percaya dihitung aja hurufnya :mrgreen: untuk bahan percobaan copy kode lebih lengkap pada textarea berikut :
.selector /* nama selector yang di pakai */{ border-color: red yellow gray blue;/* berurut atas kanan bawah atas kiri */ border-style: solid; /* jenis border */ border-width: 2px; /* ketebalan border */ width: 300px; /* panjang bidang */ padding: 6px; /* jarak text ke border */ text-align: center; /* posisi text */ background: black; /* warna latar belakang */ color: white; /* warna text */ }

Hasinya seperti ini nantinya ( KLIK GAMBAR UNTUK MEMPERBESAR )


Demikian CARA LAIN MENULIS CSS BORDER YANG LEBIH MUDAH untuk itu tambahan atas kekurangan, kritik serta saran sangat saya butuhkan dari kakak serta abang yang cuantik dan gunteng sepanjang hari :)