Cara Membuat Border Pada CSS

Cara Membuat Border Pada CSS

Border yaitu batas yang berada di pinggiran suatu konten HTML yang terdapat pada text, link, atau gambar yang biasanya memiliki bentuk, ukuran, dan warna yang bisa diatur. Misalnya seperti ini :

Gambar Contoh Border

Untuk membuat border pada CSS diperlukan 3 property utaman yaitu : border-style, border-color, border-width. Dari ketiga property tersebut memiliki value yang berbeda-beda, yang penjelasannya sebagai berikut :

Border-style

Border-style digunakan untuk mengatur style pada border, misalnya solid, garis putus-putus, garis ganda, atau kombinasi. Border-style memiliki beberapa value yaitu : none, solid, double, dotted, dashed, groove, inset, outset, ridge, hidden. Dari beberapa value tersebut memiliki hasil yang berbeda-beda.

Border-color

Border-color digunakan untuk mengatur warna pada border. Untuk value bisa berisi nama warna dalam bahasa inggris atau kode warna seperti RGB color , atau Hex Color. Yang penjelasan tentang kode warna sudah saya jelaskan di seri merubah warna background.

Border-width

Border-width digunakan untuk mengatur tebal atau lebar dari border tesebut. Untuk mengatur border bisa dengan menggunakan value thin (tipis), medium (sedang), atau thick (tebal). Selain itu kita juga bisa mengatur ketebalannya dengan menggunakan satuan pixel (px), misalnya : 1px, 3px, 5px, dan sebagainya.

Membuat Border Pada CSS

Berikut adalah contoh kode membuat border :

Pada contoh kode diatas terdapat 3 buah paragraf yang memiliki nama class yang bebeda-beda yaitu border1, border2, dan border3. ketiga nama class itulah yang digunakan css sebagai selector untuk memberi efek border. Pada baris nomor 6 terdapat selector css bernama border1 yang berisi property dan value border-style:solid; berfungsi mengatur style border dengan value solid, border-color:black; berfungsi untuk mengatur warna border dengan warna black, dan border-width:2px; berfungsi untuk mengatur tebal border dengan value 2px. Begitu juga sengan selector class border2 dan border3 yang intinya sama. Dari kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Gambar Hasil Membuat Border Pada CSS

Supaya lebih paham silakan modifikasi kode diatas dengan menganti value seperti yang sudah saya jelaskan di masing-masing property.

Membuat Border Dengan Metode Shorthand

Shorthand merupakan metode penulisan kode CSS yang property dan valuenya ditulis secara singkat. Pada contoh diatas kita membuat border dengan kode seperti berikut :

Maka dengan metode shorthand kodenya menjadi seperti berikut :

Dari motode shorthand diatas terlihat lebih singkat dan lebih mudah dalam membuat border apabila dibandingkan dengan tanpa metode shorthand.

Saya kira cukup jelas untuk penjelasan cara membuat border dengan CSS ini, apabila kamu memiliki pertanyaan silakan sampaikan di kolom komentar.


Kolom Komentar

Related Post