Border Style, Border Width, Border Color

Kalau di postingan sebelumnya sengaja saya bahas yang ringan dan enteng yakni tentang cara mengganti background theme wordPress, tutorial kali ini juga masih membahas yang ringan, enteng, renyah dan gurih heee .. (krupuk kali … ) yakni tentang css border. Pembahasannya kita fokuskan kepada border style, border width dan border color.

Border Style :

Di CSS border properties bentuk-bentuk border ada beberapa macam di antaranya, dotted, dashed, solid, double, groove, ridge, inset dan outset.

Contoh :

Contoh tanpa border/No border, penulisan kodenya : border-style:none

Contoh dotted border, penulisan kodenya : border-style:dotted

Contoh dashed border, penulisan kodenya : border-style:dashed

Contoh solid border, penulisan kodenya : border-style:solid

Contoh double border, penulisan kodenya : border-style:double

Contoh groove border, penulisan kodenya : border-style:groove

Contoh ridge border, penulisan kodenya : border-style:ridge

Contoh inset border, penulisan kodenya : border-style:inset

Contoh outset border, penulisan kodenya : border-style:outset

Border Width :

Dengan suatu border properties, border bisa diatur lebar/ketebalannya. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal).

Contoh sebuah border dengan style : solid width : 5px

penulisan kodenya : border-style:solid;border-width:5px;

Contoh sebuah border dengan style : ridge width : thick

penulisan kodenya : border-style:solid;border-width:thick;

Border Color :

Dengan suatu border properties, border bisa diatur warnanya. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000

Contoh border style:double width:3px color:#330000

penulisan kodenya : border-style:double;border-width:3px;border-color:#330000;

Penulisan kode border properties di atas bisa diringkas (shorthand) menjadi : border:double 3px #330000;

Contoh lain penggunaan border style yang berbeda untuk bagian atas (top), kanan (right), bawah (bottom) dan kiri (left) :

penulisan kodenya : border-style:dotted solid dashed double;border-width:1px 2px 3px 4px;border-color:#330000 blue red green;

Keterangan :
border-style:dotted solid dashed double, urutanya dari atas kanan bawah kiri. Atas=dotted kanan=solid bawah=dashed kiri=double. Demikian juga untuk width dan color urutannya dari atas kanan bawah kiri. Kemudian jika ditulis seperti ini : border-style:dotted solid dashed artinya bagian atas=dotted, kanan dan kiri=solid, bawah/bottom=dashed. Jika ditulis seperti ini : border-style:dotted dashed artinya bagian atas dan bawah=dotted, bagian kiri dan kanan=dashed.

Border juga bisa diset hanya pada bagian tertentu saja (individual border) misalnya hanya akan memberi border pada bagian bawah, maka penulisan kodenya menjadi : border-bottom, bagian atas saja (border-top), bagian kiri saja (border-left) atau kanan saja (border-right). Contoh pemberian boder hanya pada bagian bawah saja (border-bottom) dengan border style : dashed :

penulisan kodenya (langsung disingkat/shorthand) : border-bottom:dashed 3px #00331A;

Pada bagian tertentu, border juga bisa dibuat menjadi transparan/hidden/tersembunyi. Misalnya pada bagian atas (border-top) dibuat menjadi transparan.

penulisan kodenya (langsung disingkat/shorthand) : border:solid 3px #00331A;border-top:none; atau bisa juga seperti ini : border:solid 0 3px 3px 3px #00331A;

Selain dengan none untuk menghilangkan tampilan border juga bisa menggunakan transparent atau hidden.

Oke itu pengenalan dasar-dasar tentang border, baik border style, border width maupun border color. Dengan kreatifitas serta pengembangan lebih lanjut dan dipadukan dengan kelebihan-kelebihan yang ada di CSS3 nantinya anda akan bisa menghasilkan berbagai macam tampilan border yang menarik.

Related Post