Tips Cara Membuat Border dengan CSS

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:

Border Style

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.

Memakai_empat_style_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Memakai empat style border

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.

Memakai Border Width

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>

Lebar_Border_Berbeda_Tips_Cara_Membuat_Border_dengan_CSS_Nyekrip

Lebar Border yang Berbeda

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;
}

Border dengan berbagai warna

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.

Border dengan 4 warna

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!

Comments


Indah Mei 10, 2015 at 6:50 am

Thanks min, lengkap sekali tutorialnya dan mudah untuk dipahami.
1. Reply
  
  Admin Article Author Mei 12, 2015 at 3:44 am
  
  iya, sama-sama :)

Lukman Mei 10, 2015 at 6:51 am

bagaimana kalau mau buat border yang melengkung?
1. Reply
  
  Admin Article Author Mei 12, 2015 at 3:44 am
  
  pakai radius mas , contohnya
  
  div { border: 2px solid; border-radius: 25px; }

ade Juli 28, 2015 at 6:21 pm

saya masih newbie nih gan..
tapi nanti saya coba belajar :)

tutorial tentang cara membuat border sangat lengkap .
terimakasih gan tutorialnya

rois September 2, 2015 at 6:34 am

terima kasih min sedikit membantu.. haha

sl blogger Januari 27, 2016 at 6:10 am

terimakasih atas infonya mas

Muhamammad Ramdhan Februari 5, 2016 at 12:24 pm

bagaimana cara mengatur pangjang border ?
1. Reply
  
  Admin Article Author Februari 28, 2016 at 5:33 am
  
  #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;
  }

mustian April 17, 2016 at 7:23 am

apakah cara yang anda sampaikan ini sudah responsif gan
1. Reply
  
  Admin Article Author April 29, 2016 at 2:04 pm
  
  belum, border tidak ditujukan untuk responsive, :)

Bahas Grammar Mei 28, 2016 at 4:17 pm

Waah, saya banyak belajar dari web ini. Sebenarnya sudah bolak-balik lihat artikel yang itu-itu aja. Soalnya sering lupa scriptnya. Makasih gan.

FIRST MEDIA September 26, 2016 at 4:39 am

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…

Asep Ramdan November 8, 2016 at 4:56 pm

Sangat membantu kang,, jadi tahu secara lengkap mengenai border.hhee

EGI Maret 30, 2018 at 2:19 am

mas kalo untuk membuat garis miring di tiap sudut pada bangun datar persegi gimana ya kodingan css nya ?
terima kasih
1. Reply
  
  Admin Article Author Juni 25, 2018 at 3:43 am
  
  Belum pernah buat.. hehe

Alpa Rizki Mei 14, 2019 at 5:08 am

mas kalo misalkan bikin border hanya titik satu ditengah sebelah kanan, gimana ya? sudah pernah buat kah?

Belanja online Agustus 24, 2019 at 12:59 am

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