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!