Border Width di CSS: Code dan Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 12, 2020

Border Width CSS

Properti border-width menentukan lebar dari empat batas.

Lebar dapat disetel sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan sebelumnya: tipis, sedang, atau tebal:

Contoh
Demonstrasi lebar perbatasan yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

p.five {
  border-style: double;
  border-width: 15px;
}

p.six {
  border-style: double;
  border-width: thick;
}
</style>
</head>
<body>

<h2> Properti lebar-batas </h2>
<p> Properti ini menetapkan lebar empat batas: </p>

<p class = "one">  teks 1. </p>
<p class = "two">  teks 2. </p>
<p class = "three">  teks 3. </p>
<p class = "four">  teks 4. </p>
<p class = "five">  teks 5. </p>
<p class = "six">  teks 6. </p>

<p> <b> Catatan: </b> Properti "border-width" tidak bekerja jika digunakan sendiri.
Selalu tentukan properti "border-style" untuk menyetel batas terlebih dahulu. </p>

</body>
</html>

Lebar Sisi Tertentu

Properti border-width dapat memiliki satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

  <h2> Properti border-width </h2>
<p> Properti lebar batas dapat memiliki satu hingga empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri): </p>

<p class = "one">  teks 1. </p>
<p class = "two">  teks 2. </p>
<p class = "three">  teks 3. </p>

</body>
</html>