Home » CSS » Border di CSS : Properti Code dan Cara Membuatnya

Border di CSS : Properti Code dan Cara Membuatnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Properti Border di CSS

Properti border di CSS berfungsi untuk menetukan gaya, lebar, dan warna batas elemen.

Gaya Border CSS

Properti border-style menentukan jenis batas yang akan ditampilkan.

Nilai-nilai berikut diperbolehkan:

dotted – Mendefinisikan border bertitik
dashed – Mendefinisikan border putus-putus
solid – Mendefinisikan border padat
double – Mendefinisikan border ganda
groove – Mendefinisikan border beralur 3D. Efeknya tergantung pada nilai warna border
ridge – Mendefinisikan border bergerigi 3D. Efeknya tergantung pada nilai warna border
inset – Mendefinisikan border inset 3D. Efeknya tergantung pada nilai warna border
outset – Mendefinisikan border awal 3D. Efeknya tergantung pada nilai warna border
none – Mendefinisikan tanpa border
hidden – Mendefinisikan border tersembunyi

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

Contoh
Demonstrasi gaya perbatasan 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>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

You may also like