WRI Roadmap

Appearance

1. Permasalahan ​

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.

2. Pengertian ​

border merupakan salah satu jenis dari property css yang biasa digunakan untuk memberi batasan pada konten yang kita buat pada halaman website.

3. Contoh Kasus ​

disini kita akan membuat halaman website untuk melihat bagaimana border bekerja pada content yang kita buat.

Buat file.html dan isikan kode dibawah :

html
<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>

3.1. Border-style ​

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 :

css
/* 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 */

Hasil dari script : ​

Alternate text

3.2. Border Width ​

Kita juga dapat mengatur lebarnya border yang kita buat menggunakan property border-width

css
p {
  border-style: solid;
  border-width: 15px;
}

/* dengan menggunakan border-width: 15px maka border yang kita buat akan terlihat lebih tebal */

Hasil dari script : ​

Alternate text

3.3. Border Color ​

Kita juga dapat mengubah warna border yang kita buat menggunakan property border-color

css
p {
  border-style: solid;
  border-color: red;
}

/*  dengan menambahkan border-color : red maka border yang kita buat akan berwarna merah */

Hasil dari script : ​

Alternate text

4. Border Radius ​

Kita dapat menggunakan property border-radius untuk mengatur tingkat kelengkungan pada setiap ujung konten yang kita buat.

css
p {
  border-style: solid;
  border-radius: 15px;
}

/* dengan menambahkan border-radius : 15px maka pada bagian ujung border akan terdapat lengkungan sebesar 15px */

Hasil dari script : ​

Alternate text