Materi 9 : Border pada CSS

Border pada CSS – Border merupakan salah satu bagian dari style dalam css. Kalian bisa menambahkan berbagai macam jenis border di dalam dokumen html kalian dengan sedikit menambahkan css border. Border itu seperti membuat membuat sebuah garis tapi hanya pada bagian samping dokumen atau elemen saja, kalian bisa lihat contoh border berikut ini

Border pada CSS

Pada materi tentang border kali ini, hanya akan dibahas 5 jenis border saja. Selebihnya kalian bisa belajar di sini. Sebelum lanjut, silahkan buat satu dokumen html dan tulis kodingnya seperti di bawah ini, untuk teks “Web Design Purbalingga” bisa kalian ganti dengan kalimat yang lain, bebas.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Border pada CSS -->
  <p class="dotted">Web Design Purbalingga</p>
  <p class="solid">Web Design Purbalingga</p>
  <p class="dotted-solid">Web Design Purbalingga</p>
  <p class="normal">Web Design Purbalingga</p>
  <p class="radius">Web Design Purbalingga</p>
</body>
</html>

Border Dotted

Border ini identik berupa garis titik seperti pada gambar contoh bagian pertama di atas. Border style yang digunakan adalah dotted, atau kalian bisa menuliskan property border-style lalu memberikan nilai dotted. Perhatikan contohnya berikut ini

/*border dotted*/
.dotted {
 border-style: dotted;
}

Border Solid

Untuk border ini, nilai yang diberikan kepada property border-style nya adalah solid. Border ini sangat biasa yaitu tampak berupa garis lurus normal seperti pada gambar contoh bagian kedua di atas. Contoh penulisannya seperti ini

/*border solid*/
.solid {
 border-style: solid;
}

Border Dotted Solid

Border yang ini sudah jelas dari namanya, yaitu gabungan dari dua jenis border yang pertama dan yang kedua. Kalian bisa lihat contohnya pada gambar contoh bagian ketiga di atas. Nilai dari property border-style nya yaitu dotted solid seperti biasa.

/*border dotted solid*/
.dotted-solid {
 border-style: dotted solid;
}

Border Normal

Border ini hampir mirip dengan border solid, akan tetapi dia hanya menggunakan property border dan untuk nilai bordernya berupa angka. Lihat contoh penggunaannya berikut ini

/*border normal*/
.normal {
 border: 2px solid black;
}

Border Radius

Jenis border ini sangat berbeda dengan jenis border lainnya yang cenderung berbentuk kotak. Tapi jenis border yang satu ini, kita bisa mengatur radiusnya. Radius maksudnya adalah mengatur bentuk lengkukan sudut border tersebut, seperti yang kalian lihat pada gambar contoh bagian kelima di atas. Untuk propertynya sama dengan jenis border nomor 4 akan tetapi kita tambahkan property lain yaitu border-radius yang kemudian nilai border radius ini kita bisa mengatur bentuk lengkukan sudutnya. Berikut contoh penulisan kodenya.

/*border radius*/
.radius {
 border: 2px solid black;
 border-radius: 5px;
}

Baiklah, ada banyak sekali contoh penggunaan border pada css. Selebihnya kalian bisa belajar pada materi ini, di sana ada banyak sekali contoh – contoh border yang unik.

Sekian materi kali ini, semoga mudah di pahami. Sampaikan pertanyaan kalian di kolom komentar dan se-segera mungkin akan kami balas.

Web Design Purbalingga