CSS

Border Sides di CSS: Cara Membuat dan Codenya

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:

  1. 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:

  1. 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.


Hanifah Nurbaeti

Share
Tags: CSScss border