Cara Membuat Border dengan CSS

Kalau kamu jeli mengamati tampilan halaman website yang kamu baca saat ini (kodekit.id), kamu akan melihat garis di bawah menu atau di bawah artikel ini.

Fungsi garis tersebut sebenarnya hanyalah sebagai aksesoris untuk mempercantik tampilan desain website saja.

Lalu bagaimana cara membuatnya?

Dalam web desain, garis itu disebut sebagai garis tepi atau border karena dibuat pada batas tepi elemen HTML.

Garis tepi dibuat menggunakan property CSS border.

Property CSS border merupakan shorthand dari properti CSS border-width, border-style, dan border-color.

Untuk membuat garis tepi, diperlukan 3 nilai tersebut.

Ketiga nilai itu berfungsi untuk mengatur tebal border, style border, dan warna border.

div {
    border: 5px solid red;
}

Penjelasan lebih lengkap tentang properti border bisa kamu pelajari di referensi property CSS

Property CSS Border Style

Property border-style digunakan untuk menentukan gaya garis tepi elemen HTML.

Properti ini singkatan dari properti: border-top-style, border-right-style, border-bottom-style, dan border-left-style.

Nilai property border-style dapat ditentukan menggunakan satu, dua, tiga, atau empat dari nilai properti di atas.

Dan ini nilai atau value dari property border:

• dotted - Menentukan border dengan urutan titik-titik
• dashed - Menentukan border dengan urutan garis putus-putus
• solid - Menentukan border dengan garis solid
• double - Menentukan border dengan dua garis
• groove - Menentukan border dengan alur 3D. Efeknya tergantung pada nilai warna tepi
• ridge - Menentukan border dengan garis bergerigi 3D. Efeknya tergantung pada nilai warna tepi
• inset - Menentukan border dengan inset 3D. Efeknya tergantung pada nilai warna tepi
• outset - Menentukan border dengan outset 3D. Efeknya tergantung pada nilai warna tepi
• none - Menghilangkan efek border
• hidden - Menentukan efek border menjadi tersembunyi

<h2>Property border-style</h2>

<p class="border border--dotted">A dotted border.</p>
<p class="border border--dashed">A dashed border.</p>
<p class="border border--solid">A solid border.</p>
<p class="border border--double">A double border.</p>
<p class="border border--groove">A groove border.</p>
<p class="border border--ridge">A ridge border.</p>
<p class="border border--inset">An inset border.</p>
<p class="border border--outset">An outset border.</p>
<p class="border border--none">No border.</p>
<p class="border border--hidden">A hidden border.</p>
<p class="border border--mix">A mixed border.</p>

.border {
    border-width: 4px;
    border-color: darkorange;
    padding: 1em;
    margin-bottom: 1em;
}

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

.border--dashed {
    border-style: dashed;
}

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

.border--double {
    border-style: double;
}

.border--groove {
    border-style: groove;
}

.border--ridge {
    border-style: ridge;
}

.border--inset {
    border-style: inset;
}

.border--outset {
    border-style: outset;
}

.border--none {
    border-style: none;
}

.border--hidden {
    border-style: hidden;
}

.border--mix {
    border-style: dotted dashed solid double;
}

Property CSS Border Width

Property border-width digunakan untuk menentukan lebar garis tepi elemen HTML.

Properti ini merupakan singkatan untuk properti border-top-width, border-right-width, border-bottom-width, border-left-width.

Nilai properti border-width dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai properti di atas, dimana nilainya diatur menggunakan nilai length (px, pt, cm, atau em) atau menggunakan salah satu kata kunci thin, medium, dan thick.

<p class="teks p__pertama border--dotted">Teks paragraf pertama.</p>
<p class="teks p__kedua border--dashed">Teks paragraf kedua.</p>
<p class="teks p__ketiga border--solid">Teks paragraf ketiga.</p>
<p class="teks p__keempat border--double">Teks paragraf keempat.</p>
<p class="teks p__kelima border--groove">Teks paragraf kelima.</p>
<p class="teks p__keenam border--mix">Teks paragraf kelima.</p>

.teks {
    padding: 0.5em 1em;
    margin-bottom: 1em;
}

.p__pertama {
    border-width: 4px;
}

.p__kedua {
    border-width: 2px;
}

.p__ketiga {
    border-width: 1px;
}

.p__keempat {
    border-width: 5px;
}

.p__kelima {
    border-width: 7px;
}

.p__keenam {
    border-width: 4px;
}

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

.border--dashed {
    border-style: dashed;
}

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

.border--double {
    border-style: double;
}

.border--groove {
    border-style: groove;
}

.border--mix {
    border-style: dotted dashed solid double;
}

Property CSS Border Color

Properti CSS border-color digunakan untuk mengatur warna garis batas suatu elemen.

Properti ini merupakan singkatan untuk properti border-top-color, border-right-color, border-bottom-color, dan border-left-color.

Nilai properti border-color dapat ditentukan menggunakan satu, dua, tiga, atau empat nilai properti di atas.

Mengatur Masing-masing Sisi Border

Pada contoh di atas, kamu bisa melihat pada masing-masing sisi dapat memiliki style border yang berbeda.

Dalam CSS terdapat properti yang menentukan setiap sisi border, yaitu atas, kanan, bawah, dan kiri.

p {
  border-top-style: dotted;
  border-right-style: dashed;
  border-bottom-style: solid;
  border-left-style: double;
}

Pada contoh di atas, bisa juga ditulis seperti:

p {
  border-style: dotted dashed solid double;
}

Begini cara kerjanya:

Jika properti border-style memiliki 4 nilai:

• border-style: dotted dashed solid double;

  • Border atas memiliki style dotted
  • Border kanan memiliki style dashed
  • Border bawah memiliki style solid
  • Border kiri memiliki style double

  Contoh border dengan 4 style.

Jika properti border-style memiliki 3 nilai:

• border-style: dotted dashed solid;

  • Border atas memiliki style dotted
  • Border kanan memiliki style dashed
  • Border bawah memiliki style solid
  • Border kiri memiliki style dashed

  Contoh border dengan 3 style.

Jika properti border-style memiliki 2 nilai:

• border-style: dashed solid;

  • Border atas memiliki style dashed
  • Border kanan memiliki style solid
  • Border bawah memiliki style dashed
  • Border kiri memiliki style solid

  Contoh border dengan 2 style.

Jika properti border-style memiliki 1 nilai:

• border-style: solid;

  • Border atas memiliki style solid
  • Border kanan memiliki style solid
  • Border bawah memiliki style solid
  • Border kiri memiliki style solid

  Contoh border dengan 1 style.

Menggunakan Shorthand Property Border

Seperti yang bisa kamu lihat pada contoh di atas, ada banyak properti CSS yang harus ditulis untuk mengatur border elemen.

Untuk menyingkat penulisan kode, kamu bisa menggunakan shorthand property border berikut:

• border-width
• border-style (harus ditentukan)
• border-color

Contoh:

p {
   border: 4px solid red;
}

Kamu juga bisa memberi style border pada salah satu sisi elemen saja.

Seperti ini cara memberi border pada sisi kiri elemen:

p {
  border-left: 6px solid green;
  background-color: lightgrey;
}

Cara Membuat Sudut Border Membulat

Untuk membulatkan sudut-sudut suatu elemen, kamu bisa menggunakan property CSS border-radius

Penjelasan lebih lengkapnya bisa kamu pelajari di referensi property border-radius

p {
  border: 2px solid red;
  border-radius: 5px;
}