Jenis Border pada CSS

Border adalah suatu bentuk garis pada suatu objek yang bisa kalian pergunakan untuk membuat pembatas. Jika kalian pernah menggunakan Ms.Excel, maka kalian sering melihat kotak kolom dengan garis dipinggirannya. Seperti itu kira-kira bentuk border pada CSS. Namun pada CSS ini kita bisa membuat berbagai macam border. Sesuai dengan pembahasan kita kali ini, kita akan mempelajari jenis border pada CSS.

Untuk merubah jenis border kalian bisa menggunakan perintah border-style. Dalam border style ada beberapa jenis border yang bisa kalian pergunakan. Untuk nama jenisnya kalian bisa lihat pada contoh code berikut ini. Kalian cukup menyalin code dibawah ini agar mempersingkat waktu.

border.html

<!DOCTYPE html>
<html>
<head>
	<title>Jenis Border padCSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

<h2>Dengan menggunakan border-style</h2>
<p>Kalian dapat mengubah jenis border seperti berikut ini.</p>

<p class="dotted">dotted border.</p>
<p class="dashed">dashed border.</p>
<p class="solid">solid border.</p>
<p class="double">double border.</p>
<p class="groove">groove border.</p>
<p class="ridge">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">hidden border.</p>
<p class="mix">mixed border.</p>

</body>
</html>

style.css

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;}

Jika sudah kalian simpan kedua file tersebut dengan masing-masing judul dan formatnya. Karena kedua file ini saling berhubungan, maka kalian harus menyimpan kedua file tersebut dalam satu folder yang sama. Untuk melihat hasilnya kalian cukup membuka file htmlnya saja. Jika berhasil maka tampilanya akan seperti ini.

jenis-border-pada-css-rangga1-081017

Gambar diatas adalah jenis-jenis border yang ada pada property border-style, sehingga kalian bisa menggunakanya sesuai dengan kebutuhan website kalian. Membuat variasi border agar terlihat tidak kaku. Mudah bukan ?

Sekian pembahasan mengenai jenis border pada CSS. Semoga artikel kali ini bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada artikel yang tidak kalah menarik selanjutnya hanya di Dumet School !.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *