Border


Anda dapat menggunakan properti border untuk mengatur border pada elemen HTML. Properti ini memiliki tiga nilai yang bisa Anda atur: ketebalan (width), jenis garis (style), dan warna (color).

Contoh:

/* Membuat border dengan ketebalan 2px, garis solid, dan warna merah */
border: 2px solid red;

Pengaturan Border Tepi Tunggal

Anda juga dapat mengatur border untuk sisi tertentu dari elemen dengan menggunakan properti border-top, border-right, border-bottom, dan border-left.

Contoh:

/* Membuat border hanya pada sisi atas dengan ketebalan 1px, garis dashed, dan warna biru */
border-top: 1px dashed blue;

Border Radius

Anda bisa mengatur sudut-sudut elemen dengan menggunakan properti border-radius untuk membuat elemen memiliki sudut melengkung.

Contoh:

/* Membuat sudut elemen melengkung sebesar 10px */
border-radius: 10px;

Border dengan Radius Berbeda

Anda dapat mengatur radius sudut yang berbeda-beda untuk masing-masing sisi elemen dengan menggunakan properti border-radius dalam urutan: atas-kiri, atas-kanan, bawah-kanan, bawah-kiri.

Contoh:

/* Membuat sudut elemen melengkung sebelah kiri atas 5px, sebelah kanan atas 10px, sebelah kanan bawah 15px, dan sebelah kiri bawah 20px */
border-radius: 5px 10px 15px 20px;

Border dengan Radius Lingkaran

Untuk membuat elemen berbentuk lingkaran, Anda dapat mengatur radius sudut yang sama untuk semua sisi.

Contoh:

/* Membuat elemen berbentuk lingkaran dengan radius sudut 50% */
border-radius: 50%;

Semoga tutorial ini membantu Anda memahami cara mengatur border dengan CSS!