Ringkasan Border di CSS: Pahami Penggunaan Border

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

by Hanifah Nurbaeti October 12, 2020

Section Artikel

1 CSS Border – Properti Singkatan
- 1.1 Border Kiri
- 1.2 Border Bawah

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>