CSS

Belajar CSS Part 7: Cara Mengubah Border Dengan CSS

Selamat datang. Salam jumpa kembali di pertemuan yang ke-7 dalam sesi belajar CSS. Pada pertemuan ini saya akan mengulas Tutorial Mengubah Border.

CSS dapat kita gunakan untuk mengubah atau memanipulasi warna, ukuran, dan style border sendiri. Misalkan border yang bentuknya dengan garis titik – titik atau strip atau juga yang biasa saja.


PROPERTI BORDER

Beberapa properti border yang dapat digunakan untuk mengatur border style CSS:

  • border-bottom : Mengatur garis yang terletak di bawah.
  • border-bottom-color : Mengatur warna garis yang terletak di bawah.
  • border-bottom-style : Mengatur style garis yang terletak di bawah.
  • border-bottom-width : Mengatur ukuran garis yang terletak di bawah.
  • border-color : Mengatur warna garis.
  • border-left : Mengatur garis yang terletak di sebelah kiri.
  • border-left-color : Mengatur warna garis yang terletak di sebelah kiri.
  • border-left-style : Mengatur style garis yang terletak di sebelah kiri.
  • border-left-width : Mengatur ukuran garis yang terletak di sebelah kiri.
  • border-right : Mengatur garis yang terletak di sebelah kanan.
  • border-right-color : Mengatur warna garis yang terletak di sebelah kanan.
  • border-right-style : Mengatur style garis yang terletak di sebelah kanan.
  • border-right-width : Mengatur ukuran garis yang terletak di sebelah kanan.
  • border-style : Mengatur style garis.
  • border-top : Mengatur garis yang terletak di sebelah atas.
  • border-top-color : Mengatur warna garis yang terletak di sebelah atas.
  • border-top-style : Mengatur style garis yang terletak di sebelah atas.
  • border-top-width : Mengatur ukuran garis yang terletak di sebelah atas.
  • border-width : Mengatur ukuran garis.

Baca: Memahami Position Dalam CSS


1. MENGUBAH BORDER STYLE

Di CSS ada banyak model untuk membuat border dengan style garis seperti yang saya katakan sebelumnya. Ada yang berbentuk garis titik – titik, strip, garis putus – putus dan masih banyak lagi style yang tersedia.

Untuk membuat garis serta menentukan style yang diinginkan kita bisa menggunakan properti border-style. Silahkan teman – teman perhatikan contoh kode program dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Border style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h4 id="garis_1">Garis dengan style solid</h4>
	<h4 id="garis_2">Garis dengan style dotted</h4>
	<h4 id="garis_3">Garis dengan style dashed</h4>
	<h4 id="garis_4">Garis dengan style double</h4>
	<h4 id="garis_5">Garis dengan style groove</h4>
	<h4 id="garis_6">Garis dengan style inset</h4>
	<h4 id="garis_7">Garis dengan style outset</h4>
	<h4 id="garis_8">Garis dengan style ridge</h4>
</body>
</html>

style.css

Buat ke-2 file itu dan simpan didalam satu folder, kemudian jalankan file index.html.

mengubah border style css - #irvangen
mengubah border style css – #irvangen

2. MENGATUR UKURAN BORDER CSS

Untuk memberi ukuran pada border kamu bisa menggunakan properti border-width. Misalkan, border yang diatas terlalu kecil, nah tentu ini bisa kita ubah dengan properti tersebut.

Silahkan perhatikan kode program dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Border style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h4 id="garis_1">Garis dengan style solid</h4>
	<h4 id="garis_2">Garis dengan style dotted</h4>
	<h4 id="garis_3">Garis dengan style dashed</h4>
	<h4 id="garis_4">Garis dengan style double</h4>
	<h4 id="garis_5">Garis dengan style groove</h4>
	<h4 id="garis_6">Garis dengan style inset</h4>
	<h4 id="garis_7">Garis dengan style outset</h4>
	<h4 id="garis_8">Garis dengan style ridge</h4>
</body>
</html>

style.css

#garis_1{
	border-style:solid;
	border-width: 5px;
}
#garis_2{
	border-style: dotted;
	border-width: 10px;
}
#garis_3{
	border-style: dashed;
	border-width: 3px;
}
#garis_4{
	border-style: double;
	border-width: 9px;
}
#garis_5{
	border-style: groove;
	border-width: 25px;
}
#garis_6{
	border-style: inset;
	border-width: 5px;
}
#garis_7{
	border-style: outset;
	border-width: 5px;
}
#garis_8{
	border-style: ridge;
	border-width: 40px;
}

Hasilnya…

mengatur ukuran border style css - #irvangen
mengatur ukuran border style css – #irvangen

3. MEMBERI WARNA BORDER

Cara memberi warna pada garis border tambahkan properti border-color pada style.css. Contoh penulisannya seperti dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Border style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h4 id="garis_1">Garis dengan style solid</h4>
	<h4 id="garis_2">Garis dengan style dotted</h4>
	<h4 id="garis_3">Garis dengan style dashed</h4>
	<h4 id="garis_4">Garis dengan style double</h4>
	<h4 id="garis_5">Garis dengan style groove</h4>
	<h4 id="garis_6">Garis dengan style inset</h4>
	<h4 id="garis_7">Garis dengan style outset</h4>
	<h4 id="garis_8">Garis dengan style ridge</h4>
</body>
</html>

style.css

#garis_1{
	border-style:solid;
	border-width: 5px;
}
#garis_2{
	border-style: dotted;
	border-width: 10px;
	border-color:red;
}
#garis_3{
	border-style: dashed;
	border-width: 3px;
	border-color:blue;
}
#garis_4{
	border-style: double;
	border-width: 9px;
	border-color:violet;
}
#garis_5{
	border-style: groove;
	border-width: 25px;
	border-color:#12ff00;
}
#garis_6{
	border-style: inset;
	border-width: 5px;
	border-color:#333333;
}
#garis_7{
	border-style: outset;
	border-width: 5px;
	border-color:red;
}
#garis_8{
	border-style: ridge;
	border-width: 50px;
	border-color: blue;
}

Hasilnya…

cara memberi warna pada border style css - #irvangen
cara memberi warna pada border style css – #irvangen

#CARA MANIPULASI BORDER DENGAN CSS

Untuk memanipulasi border dengan cepat kita bisa langsung menggunakan properti css border dan mengisi value ukuran, warna dan jenis garis.

Silahkan perhatikan lagi contoh penulisan dan kode programnya dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Border style CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h4 id="garis_1">Garis dengan gaya solid</h4>
	<h4 id="garis_2">Garis dengan gaya dotted</h4>	
	<h4 id="garis_3">Garis dengan gaya dotted</h4>
</body>
</html>

style.css

#garis_1{
	border:1px solid blue;
}
#garis_2{
	border:10px dotted red;
}	
#garis_3{
	border:30px dashed #12ff00;
}

Contoh syntax diatas untuk mengubah border dengan cepat dan praktis, kamu bisa langsung memasukan ukuran, jenis border dan memberi warna yang teman – teman inginkan.

tepatnya dibagian ini.

border:1px solid blue;

Saya mengubah border tersebut dengan ukuran 1px, jenis bordernya solid dan memberi warna biru. Hasilnya…

cara manipulasi border dengan cepat - #irvangen
cara manipulasi border dengan cepat – #irvangen

Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Border Pada CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.


Income Search

  • cara mengubah ukuran border css
  • cara ngecilin border di php
  • membuat garis putus putus di css
  • border pada css
  • belajar border css
  • cara ubah warna border di css
  • contoh Penggunaan Border Calor Pada html
  • cara membuat border css
  • jenis border
Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *