Dasar-Dasar Penggunaan Border di CSS

Sekarang kita akan belajar menambahkan border pada elemen. Ini dilakukan dengan menggunakan tiga properti: properti border-width mengatur ketebalan border, border-color - warna, dan border-style mengatur tipe border.

Dua properti pertama bekerja dengan cara yang jelas: border-color menerima warna dalam format yang sama dengan properti color, dan ketebalan border ditetapkan dalam piksel. Namun properti border-style menerima nilai dalam bentuk kata kunci. Misalnya, nilai solid mengatur garis solid.

Mari kita buat, contohnya, border dengan ketebalan 3 piksel, dalam bentuk garis solid, berwarna merah:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* ketebalan 3px */
  border-style: solid;  /* dalam bentuk garis */
  border-color: red;    /* warna merah */
  width: 300px;
  height: 100px;
}

Результат:

Dalam pelajaran berikutnya, kita akan membahas pekerjaan dengan border lebih detail.