CSS Border

View Categories

CSS Border

Properti border CSS digunakan untuk menentukan style, ketebalan, dan warna garis batas (border) suatu elemen HTML.

CSS border-style

Properti border-style menentukan jenis border yang akan ditampilkan.

Berikut merupakan nilai untuk mengubah jenis border :

  • dotted – Mendefinisikan border dotted (titik-titik)
  • dashed – Mendefinisikan border dashed (garis putus-putus)
  • solid – Mendefinisikan border solid (garis tebal)
  • double – Mendefinisikan border double (garis double)
  • groove – Menentukan border alur 3D, efeknya bergantung pada nilai border-color
  • ridge – Mendefinisikan border bergerigi 3D, efeknya bergantung pada nilai border-color
  • inset – Menentukan border inset 3D, efeknya bergantung pada nilai border-color
  • outset – Menentukan border outset 3D, efeknya bergantung pada nilai border-color
  • none – Mendefinisikan tanpa border
  • hidden – Menentukan border hidden

Properti border-style dapat memiliki satu hingga empat nilai batas (untuk batas/border atas , batas/border kanan , batas/border bawah , dan batas/border kiri ).

Contoh

Berikut merupakan contoh penerapan properti border-style yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>Properti border-style</h2>
<p>Properti ini menentukan jenis border (jenis garis batas) pada elemen HTML:</p>

<p class="dotted">Border dotted</p>
<p class="dashed">Border dashed</p>
<p class="solid">Border solid</p>
<p class="double">Border double</p>
<p class="groove">Border groove</p>
<p class="ridge">Border ridge</p>
<p class="inset">Border inset</p>
<p class="outset">Border outset</p>
<p class="none">Tanpa border</p>
<p class="hidden">Border hidden</p>
<p class="mix">Border mix</p>

</body></html>

Jalankan Contoh

CSS border-width

Properti border-width menentukan lebar batas pada keempat border.

Lebar dapat disetel dengan satuan ukuran tertentu (dalam px, pt, cm, em, dll.) atau dengan menggunakan salah satu dari tiga nilai, yaitu thin, medium, atau thick.

Contoh

Berikut merupakan contoh penerapan lebar border 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 border-width</h2>
<p>Properti ini menentukan lebar dari empat border:</p>

<p class="one">Contoh lebar border</p>
<p class="two">Contoh lebar border</p>
<p class="three">Contoh lebar border</p>
<p class="four">Contoh lebar border</p>
<p class="five">Contoh lebar border</p>
<p class="six">Contoh lebar border</p>

<p><b>Catatan:</b> Properti border-width tidak berfungsi jika digunakan sendiri.
Selalu tentukan properti border-style untuk menentukan border terlebih dahulu.</p>

</body></html>

Jalankan Contoh

Lebar Sisi Spesifik

Dengan menggunakan properti border-width maka nilai lebar batas untuk border atas, border kanan, border bawah  dan border kiri, dapat ditentukan secara spesifik atau dengan nilai yang berbeda:

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>Dengan menggunakan properti border-width, nilai lebar batas untuk border atas, border kanan, border bawah dan border kiri, dapat ditentukan secara spesifik (top border, right border, bottom border, dan left border):</p>

<p class="one">Contoh lebar border</p>
<p class="two">Contoh lebar border</p>
<p class="three">Contoh lebar border</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Gambar Sebagai Latar Belakang Dengan CSS
Tutorial setelahnya : Warna CSS Border
Semua Tutorial CSS : Tutorial CSS

Tinggalkan Balasan