CSS Border

Sekarang kita lanjut ke CSS Borders, yaitu cara untuk menambahkan dan mengatur garis tepi (border) pada elemen HTML. Meskipun kelihatannya sederhana, border punya peran penting untuk membuat elemen terlihat menonjol, terpisah, atau punya gaya visual tertentu.

Apa Itu CSS Border?

Border adalah garis yang mengelilingi elemen HTML. Kita bisa mengatur:

Ketebalan
Warna
Jenis garis
Sudut lengkung (rounded corner)

Properti Utama Border

Css Border memiliki beberapa properti utama yang biasa digunakan untuk membuat website yang dapat dilihat pada tabel berikut ini.

Properti	Fungsi
`border`	Shorthand semua properti border
`border-width`	Ketebalan border
`border-style`	Jenis garis border
`border-color`	Warna border
`border-radius`	Membuat sudut elemen menjadi membulat

Contoh Dasar

Berikut ini contoh dasar penggunaan border.

div {
  border: 2px solid black;
}

Penjelasan:

2px = ketebalan
solid = jenis garis
black = warna

Jenis Border Style

Properti border-style memiliki nilai yang dapat digunakan untuk menentukan jenis border yang akan dibuat.

Nilai	Gaya Garis
`none`	Tanpa border
`solid`	Garis padat
`dashed`	Garis putus-putus
`dotted`	Titik-titik
`double`	Garis ganda
`groove`	3D beralur masuk
`ridge`	3D beralur keluar
`inset`	Efek masuk
`outset`	Efek menonjol

Contoh: Bermain dengan Border

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      padding: 20px;
      margin: 20px;
      border: 3px dashed #4caf50;
      background-color: #f9f9f9;
    }

    .rounded {
      border: 2px solid #2196f3;
      border-radius: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="box">Ini adalah border dashed</div>
  <div class="rounded">Ini adalah border dengan sudut membulat</div>

</body>
</html>

Hasilnya:

css-border-example

Border Radius

border-radius digunakan untuk membuat sudut elemen membulat.

div {
  border-radius: 15px;
}

Kamu juga bisa bikin lingkaran sempurna:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
}

Shorthand Border

Selain menggunakan properti border yang sudah dipelajari di atas, kamu juga dapat menggunakan shorthad border seperti pada contoh berikut ini.

Contoh:

/* Shorthand lengkap */
border: 1px solid red;

/* Spesifik sisi */
border-top: 3px solid blue;
border-right: 2px dashed green;

Kesimpulan

Dengan CSS Border kamu bisa:

Menambah batas visual antar elemen
Menonjolkan konten atau komponen penting
Membuat gaya dekoratif seperti kartu, badge, tombol, dll