CSS Borders

CSS memberikan kemampuan untuk menambahkan border pada elemen HTML dengan properti border. Anda bisa mengatur warna, gaya, dan ketebalan border elemen.

1. Menambahkan Border Sederhana (border)

Dengan properti border, Anda dapat menambahkan border dengan warna, gaya, dan ketebalan default.

div {
  border: 3px solid black;
}

2. Menggunakan Border Color (border-color)

Dengan border-color, Anda dapat mengubah warna border.

div {
  border-color: red;
  border-width: 5px;
  border-style: solid;
}

3. Menggunakan Border Width (border-width)

Dengan border-width, Anda dapat mengatur ketebalan border.

div {
  border-width: 10px;
  border-style: dashed;
  border-color: blue;
}

4. Menggunakan Border Style (border-style)

Properti border-style digunakan untuk menentukan gaya border, seperti solid, dashed, atau dotted.

div {
  border-style: dotted;
  border-width: 2px;
  border-color: green;
}

5. Menggunakan Border Radius (border-radius)

Dengan border-radius, Anda bisa membuat sudut border menjadi melengkung.

div {
  border-radius: 15px;
  border: 5px solid purple;
}

6. Menggunakan Border Shorthand

Anda juga bisa menggunakan shorthand untuk menetapkan border sekaligus untuk semua sisi.

div {
  border: 2px solid #000;
}

Ringkasan Properti CSS Border