Terkadang dalam membuat halaman web kita tidak mengetahui batas dari konten yang kita buat pada halaman web, salah satu cara untuk mengetahui batas konten yang telah kita buat kita dapat menggunakan border.
border merupakan salah satu jenis dari property css yang biasa digunakan untuk memberi batasan pada konten yang kita buat pada halaman website.
disini kita akan membuat halaman website untuk melihat bagaimana border bekerja pada content yang kita buat.
Buat file.html dan isikan kode dibawah :
<html>
<head>
<title>Belajar Border</title>
<link rel="stylesheet" href="./file.css">
</head>
<body>
<!-- disni kita akan menggunakan sebuah paragraf -->
<!-- dimana nanti content yang ada pada paragraf akan diberi border -->
<p>Belajar pengaplikasian border</p>
</body>
</html>border sendiri memiliki banyak jenis property dan yang kita gunakan untuk mengatur jenis border adalah property border-style, property border-style juga memiliki beberapa value seperti :
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
buatlah file.css dan implementasikan kode dibawah menggunakan value yang ada pada border-style :
/* p{
border-style: value;
} */
p{
border-style: solid;
}
/* dengan menambahkan properti boder-style pada <p> maka pada tampilan yang kita buat akan terlihat bordernya dalam bentuk garis */
Kita juga dapat mengatur lebarnya border yang kita buat menggunakan property border-width
p {
border-style: solid;
border-width: 15px;
}
/* dengan menggunakan border-width: 15px maka border yang kita buat akan terlihat lebih tebal */
Kita juga dapat mengubah warna border yang kita buat menggunakan property border-color
p {
border-style: solid;
border-color: red;
}
/* dengan menambahkan border-color : red maka border yang kita buat akan berwarna merah */
Kita dapat menggunakan property border-radius untuk mengatur tingkat kelengkungan pada setiap ujung konten yang kita buat.
p {
border-style: solid;
border-radius: 15px;
}
/* dengan menambahkan border-radius : 15px maka pada bagian ujung border akan terdapat lengkungan sebesar 15px */