Border Sides di CSS: Cara Membuat dan Codenya

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

by Hanifah Nurbaeti October 12, 2020

Border CSS – Sisi Individu

Di CSS ada properti untuk menentukan setiap perbatasan (atas, kanan, bawah, dan kiri):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
</style>
</head>
<body>

<h2> Sisi Border Individual </h2>
<p> 2 gaya border yang berbeda. </p>

</body>
</html>

Contoh di atas memberikan hasil yang sama seperti ini:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-style: dotted solid;
}
</style>
</head>
<body>

<h2> Sisi Border Individual </h2>
<p> 2 gaya border yang berbeda. </p>

</body>
</html>

Jadi, begini cara kerjanya:

Jika properti border-style memiliki empat nilai:

border-style: dotted solid double dashed;
- border atas dotted
- border kanan solid
- border bawah double
- border kiri dashed

Jika properti border-style memiliki tiga nilai:

border-style: dotted solid double;
- border atas dotted
- border kiri dan kanan solid
- border bawah double

Jika properti border-style memiliki dua nilai:

border-style: dotted solid;
- border atas dan bawah dotted
- border kiri dan kanan solid

Jika properti border-style memiliki satu nilai::

border-style: dotted;
- Semua sisi border dotted

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2> Sisi Perbatasan Individual </h2>
<p class = "four"> 4 gaya border yang berbeda. </p>
<p class = "three"> 3 gaya border yang berbeda. </p>
<p class = "two"> 2 gaya border yang berbeda. </p>
<p class = "one"> 1 gaya border. </p>

</body>
</html>

Properti border-style digunakan dalam contoh di atas. Namun, ini juga berfungsi dengan border-width dan border-color.