CSS Border

Assalamu'alaikum Wr.Wb.

CSS Border adalah salah satu elemen yang sangat penting dalam pembuatan sebuah Website, Go Blog Go akan share posting CSS Border hanya untuk mengingat dan ditulis agar tidak lupa. Bagi Mojang dan Bujang yang belum tau silahkan kalau mau mempelajari-nya.
Dalam Properti Border terdapat 3 deklarasi, yaitu:

• border-width (menentukan tipis atau tebal-nya border ukuran yang digunakan: pixel,thin,medium dan thick(tebal))
• border-style (type style yang digunakan)
• border-color (menentukan warna border type jenis-nya Hex, RGB atau secara langsung ditulis nama warna-nya)

Contoh-nya :

border: border-width border-style border-color border: 2px dotted #ff0000

Penerapan-nya Secara tidak langsung
CSS-nya

<style type='text/css'> #garis { border-width: 2px; border-width: dotted; border-width: #ff0000; } </style>

HTML-nya

<div id='garis'>........</div>

Penerapan-nya Secara langsung
HTML-nya

<div style='border-width: 2px;border-width: dotted;border-width: #ff0000;'>........</div>

Beberapa Contoh dari Style Border :

Border dengan style Solid

Border dengan style Dashed

Border dengan style Dotted

Border dengan style Outset

Border dengan style Inset

Border dengan style Double

Border dengan style Ridge

Border dengan style Groove

Dari deklarasi border, Mojang dan Bujang dapat menentukan deklarasi untuk border atas,kanan,bawah dan kiri

DEKLARASI	KETERANGAN
border-top: 2px dotted #ff0000	garis atas
border-right: 2px dotted #ff0000	garis kanan
border-bottom: 2px dotted #ff0000	garis bawah
border-left: 2px dotted #ff0000	garis kiri

DEKLARASI	KETERANGAN
border-top-width: 2px;	tebal garis atas
border-right-width: 2px;	tebal garis kanan
border-bottom-width: 2px;	tebal garis bawah
border-left-width: 2px;	tebal garis kiri
border-top-style: 2px;	tipe garis atas
border-right-style: 2px;	tipe garis kanan
border-bottom-style: 2px;	tipe garis bawah
border-left-style: 2px;	tipe garis kiri
border-top-color: 2px;	warna garis atas
border-right-color: 2px;	warna garis kanan
border-bottom-color: 2px;	warna garis bawah
border-left-color: 2px;	warna garis kiri

Sebagai keterangan tambahan :
border-width: 4px 2px 7px 0px; sama dengan border-width: atas kanan bawah kiri;, hal ini berlaku pula untuk border-style dan border-color.

Dengan penjelasan yang singkat ini mudah-mudahan Mojang dan Bujang dapat lebih mengerti tentang CSS Border. Go Blog Go...!!! Amiin

Wassalam,

Sumber :w3.org dan w3schools.com