Home » CSS » Ringkasan Border di CSS: Pahami Penggunaan Border

Ringkasan Border di CSS: Pahami Penggunaan Border

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

CSS Border – Properti Singkatan

Properti shorthand border ini digunakan untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti border individu dalam satu properti.

Properti border adalah properti singkatan untuk properti border individu berikut:

  • border-width
  • border-style (required)
  • border-color

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p> Properti ini adalah singkatan dari border-width, border-style, dan border-color. </p>

</body>
</html>

Kita juga bisa menentukan semua properti border individu hanya untuk satu sisi atau nilai:

Border Kiri

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>
<p> Properti ini adalah singkatan dari border-width, border-style, dan border-color. </p>

</body>
</html>

Border Bawah

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>
<p> Properti ini adalah singkatan dari border-width, border-style, dan border-color. </p>

</body>
</html>

You may also like