Garis Border CSS

Properti Garis Batas CSS

CSS border Properti memungkinkan Anda menentukan gaya, lebar, dan warna garis batas elemen.

Semua sisi saya mempunyai garis batas.

Saya mempunyai garis batas bawah merah.

Saya mempunyai garis batas yang berukuran lingkaran.

Saya mempunyai garis batas kiri biru.

Gaya Garis Batas CSS

border-style Properti menentukan jenis garis batas yang akan ditampilkan.

Memungkinkan nilai berikut:

  • dotted - Definisi garis batas titik
  • dashed - Definisi garis batas garis tipis
  • solid - Definisi garis batas garis tebal
  • double - Definisi garis batas ganda
  • groove - Definisi garis batas 3D lubang. Efeknya tergantung dari nilai border-color
  • ridge - Definisi garis batas 3D cekung. Efeknya tergantung dari nilai border-color
  • inset - Definisi garis batas 3D inset. Efeknya tergantung dari nilai border-color
  • outset - Definisi garis batas 3D outset. Efeknya tergantung dari nilai border-color
  • none - Definisi garis batas tanpa batas
  • hidden - Definisi garis batas tersembunyi

border-style Properti dapat diatur dengan satu hingga empat nilai (digunakan untuk garis batas atas, kanan, bawah, dan kiri).

Contoh

Menampilkan berbagai gaya garis batas:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Hasil:

Batas titik.

Batas garis garis.

Batas garis lurus.

Batas garis ganda.

Batas lubang. Efeknya tergantung dari nilai border-color.

Batas lonceng. Efeknya tergantung dari nilai border-color.

Batas 3D inset. Efeknya tergantung dari nilai border-color.

Batas 3D outset. Efeknya tergantung dari nilai border-color.

Batas tanpa batas.

Batas disembunyikan.

Batas campuran.

Coba sendiri

Perhatian:Jika belum diatur border-style Atur atribut, atau atribut batas CSS lainnya (yang akan dijelaskan dengan detil di bab berikutnya) tidak akan berfungsi sama sekali!