Apakah kita ingin agar gambar atau salah satu elemen dalam halaman web kita memiliki border? Jika iya, mari kita bahas tutorial tips cara membuat border dengan css. Properti Border pada CSS memungkinkan kita untuk mengatur dan menyesuaikan border di sekitar elemen HTML.
Dalam properti border kita bisa menggunakan teknik shorthand untuk mengatur nilai properti border di dalam satu tempat. Properti ini bisa diatur mulai dari tebal atau lebar, warna dan gaya atau style pada border.
Ada tiga properti utama dalam mengatur border:
border-style
:- Menentukan style pada border, apakah mau solid, garis putus-putus, garis ganda, atau kombinasi.border-color
:- Menentukan warna dari border.border-width
:- Menentukan tebal atau lebar dari border.
Selain ketiga properti utama diatas, ada satu lagi properti dengan menggunakan teknik shorthand css.
border
:- Menentukan ukuran, menentukan bentuk, menentukan warna.
Mengenal Properti Border-style CSS
Properti border-style ini mendefinisikan jenis border (style border) yang akan ditampilkan. Dibawah ini adalah skrip untuk menentukan gaya yang bisa digunakan:
border-style: none /* Tidak ada border */ border-style: solid border-style: double border-style: dotted border-style: dashed border-style: groove border-style: inset border-style: outset border-style: ridge border-style: hidden
Secara berurutan skrip border-style diatas akan menampilkan gambar seperti berikut ini:
Contoh penggunaan Properti Border-style CSS
Berikut adalah contoh skrip yang menunjukkan beberapa gaya border yang telah disebutkan di atas. Kita dapat mengatur properti border secara berbeda pada empat sisi elemen.
<html> <head> <title>Nyekrip: Belajar Border CSS</title> <style> p{border-top-style: solid; border-left-style: dotted; border-bottom-style: dashed; border-right-style: double; } </style> </head> <body> <p>Paragraf nih, pakai border style solid, dotted, dashed dan double</p> </body> </html>
Jika kita jalankan skrip diatas, maka akan nampak seperti gambar berikut.
Mengenal Properti Border-width CSS
Properti border-width membantu kita untuk mengatur lebar dari border. Kita bisa mengatur properti border dengan value thin
(tipis), medium
(sedang) atau-pun thick
(tebal).
Kita juga dapat mengatur lebar border dalam satuan piksel. Pada saat mengatur lebar dari border, satu hal harus diingat bahwa properti ini tidak akan bekerja jika berdiri sendiri, untuk itu kita perlu mengatur style dari border terlebih dahulu.
Perhatikan skrip berikut:
border-width: thin border-width: thick border-width: medium
Skrip diatas akan menampilkan border seperti gambar berikut.
Contoh penggunaan Properti Border-width CSS
Contoh skrip berikut ini akan membantu kita untuk memahami dalam mengatur lebar dari border. Kita dapat mengatur lebar border secara berbeda pada empat sisi elemen. Sebagai informasi bahwa dalam penulisan css dalam contoh skrip ini menggunakan teknik embedded style, untuk teknik lainnya silahkan kunjungi tutorial Tips Cara menggunakan CSS pada HTML .
Catatan: Lebar border akan menjadi 0 atau absolute jika border-style diatur menjadi none atau absolute.
<html> <head> <title>Nyekrip: Belajar Border CSS</title> <style> p{border-style:solid; border-left-width:10px; border-top-width:20px; border-right-width:30px; border-bottom-width:40px;} </style> </head> <body> <p>Paragraf nih, dengan lebar border yang berbeda pada tiap sisi</p> </body> </html>
Mengenal Properti Border-color CSS
Properti border-color digunakan untuk memberikan warna pada border. Kita bisa mengatur warna dasar untuk border:
Untuk mengatur warna pada border, kita bisa menggunakan 3 cara seperti berikut
- Nama – nama warna, seperti
white
untuk warna putih. - RGB – nilai RGB, seperti
rgb(255,255,255)
untuk warna putih. - Hex – nilai hex, seperti
#ffffff
untuk warna putih.
Jika kita tidak mengatur warna pada border, maka warna akan di set secara default untuk mengikuti warna elemen.
p.pertama { border-style: solid; border-color: red; border-width:10px; } p.kedua { border-style: solid; border-color: #98bf21; border-width:10px; } p.ketiga { border-style: solid; border-color: rgb(252,217,197); border-width:10px; }
Contoh penggunaan Properti Border-color CSS
Dalam contoh skrip ini kita akan menentukan warna border dengan cara yang berbeda pada setiap sisi elemen, seperti yang ditunjukkan pada skrip berikut ini:
<html> <head> <title>Nyekrip: Belajar Border CSS</title> <style> p { border-style: solid; border-width: 20px; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; } </style> </head> <body> <p>Paragraf nih, dengan border yang memiliki empat warna</p> </body> </html>
Skrip diatas jika dijalankan akan nampak seperti gambar berikut.
Mengenal Shorthand pada Properti Border
Setelah kita mempelajari properti pada border, kita bisa menyimpulkan bahwa terdapat tiga properti utama yaitu:
- Border-style: Mengatur Style Border
- Border-width: Mengatur Lebar Border
- Border-color: mengatur warna border
Sangat merepotkan jika kita mengatur border harus mengetikkan ketiga properti diatas, untuk mengatasi hal ini kita bisa menggunakan teknik shorthand border dengan mengetikkan tiga value (style, width,color) dalam satu properti, dan properti itu adalah properti border
.
Perhatikan skrip berikut dan lihat perbedaannya.
Skrip tanpa menggunakan teknik shorthand.
p { border-style: solid; border-width: 20px; border-top-color: red; }
Skrip dengan menggunakan teknik shorthand.
p {border: solid 20px red;}
Kedua skrip diatas memberikan efek yang sama, tapi jelas perbedaannya terdapat pada keringkasan dalam pengetikan skrip. Perlu diperhatikan tentang cara penulisan teknik shorthand memiliki struktur border: border-style border-width border-color;
.
Sekarang kita sudah mengerti bagaimana cara membuat border dengan css, cukup mudah bukan? Biasakan untuk selalu menggunakan teknik shorthand karena teknik ini memiliki kelebihan yaitu keringkasan dalam mengetik skrip dan ukuran file CSS yang dihasilkan juga semakin kecil sehingga akan meningkatkan kecepatan loading web kita.
Jangan hanya dibaca, segera praktek agar cepat menguasai teknik shorthand, jika ada pertanyaan silahkan sampaikan lewat kolom komentar dibawah ini. Terimakasih.
Happy Nyekrip!
Thanks min, lengkap sekali tutorialnya dan mudah untuk dipahami.
iya, sama-sama :)
bagaimana kalau mau buat border yang melengkung?
pakai radius mas , contohnya
div {
border: 2px solid;
border-radius: 25px;
}
saya masih newbie nih gan..
tapi nanti saya coba belajar :)
tutorial tentang cara membuat border sangat lengkap .
terimakasih gan tutorialnya
terima kasih min sedikit membantu.. haha
terimakasih atas infonya mas
bagaimana cara mengatur pangjang border ?
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
apakah cara yang anda sampaikan ini sudah responsif gan
belum, border tidak ditujukan untuk responsive, :)
Waah, saya banyak belajar dari web ini. Sebenarnya sudah bolak-balik lihat artikel yang itu-itu aja. Soalnya sering lupa scriptnya. Makasih gan.
Keren gan sumpah gan, gak nanggung-nanggung buat artikelnya paket komplit spesial nih namanya, ini yang lagi saya cari. Sangat bermanfaat dan membantu gan, terima kasih. Sukses selalu gan…
Sangat membantu kang,, jadi tahu secara lengkap mengenai border.hhee
mas kalo untuk membuat garis miring di tiap sudut pada bangun datar persegi gimana ya kodingan css nya ?
terima kasih
Belum pernah buat.. hehe
mas kalo misalkan bikin border hanya titik satu ditengah sebelah kanan, gimana ya? sudah pernah buat kah?
Klo menurut saya nama nya css lebih mudah dikuasai oleh orang awam tetapi klo php,javascript ,bootstrap mgkn akan butuh nalar yg berbeda krn itu merupakan permainan logika hehhehe