Tutorial Belajar CSS: Cara Membuat Garis Tepi pada HTML (border)

Membuat garis tepi (border) merupakan salah satu efek tampilan yang paling sering ditambahkan ketika mendasain web. Dalam tutorial belajar CSS kali ini kita akan membahas cara penggunaan property border yang digunakan untuk membuat garis tepi pada element HTML.


Cara Penulisan Property border CSS

Untuk membuat garis tepi dengan CSS, kita menggunakan property border. Property ini membutuhkan 3 nilai: tebal border, style border, dan warna border. Penulisan ketiga nilai ini dipisahkan dengan spasi.

Sebagai contoh, jika saya ingin membuat sebuah bingkai setebal 2 pixel, berbentuk garis normal dan berwarna merah, saya bisa menggunakan kode berikut:

div {
  border: 2px solid red;
}

Jika saya ingin membuat bingkai dengan tebal 10 pixel, berbentuk garis putus-putus dan berwarna biru, kodenya adalah:

div {
  border: 10px dotted blue;
}

Berikut kode HTML dan CSS lengkap dari kedua contoh ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width:200px;
     height: 50px;
   }
   .garis_tepi1 {
     border: 2px solid red;
   }
   .garis_tepi2 {
     border: 10px dotted blue;
   }
</style>
</head>
<body>
<div class="garis_tepi1"></div>
<br>
<div class="garis_tepi2"></div>
</body>
</html>

Cara membuat bingkai border dengan CSS

Dalam 2 contoh pembuatan border diatas, saya hanya menggunakan 2 jenis style border, yakni solid dan dotted. Sebenarnya terdapat 8 jenis style border, yakni: solid, dotted, dashed, double, groove, ridge, inset dan outset.

Berikut contoh tampilan ke 8 jenis border ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div{
     width: 80px;
     height: 80px;
     float: left;
     margin: 20px;
     text-align: center;
   }
   .satu { border: 10px solid green; }
   .dua { border: 10px dotted green; }
   .tiga { border: 10px dashed green; }
   .empat { border: 10px double green; }
   .lima { border: 10px groove green; }
   .enam { border: 10px ridge green; }
   .tujuh { border: 10px inset green; }
   .delapan { border: 10px outset green; }
</style>
</head>
<body>
<div class="satu">solid</div>
<div class="dua">dotted</div>
<div class="tiga">dashed</div>
<div class="empat">double</div>
<div class="lima">groove</div>
<div class="enam">ridge</div>
<div class="tujuh">inset</div>
<div class="delapan">outset</div>
</body>
</html>

Jenis-jenis style border CSS

Anda dapat abaikan sementara property CSS lain seperti float dan margin, karena akan kita pelajari nantinya.


Mengatur Border untuk Setiap Sisi

Cara penulisan border seperti yang kita pelajari diatas, akan menampilkan bingkai untuk semua sisi. Namun CSS juga membolehkan kita untuk mengatur sisi mana saja yang akan diberi bingkai, apakah atas (top), right (kanan), bawah (bottom) atau kiri (left).

Untuk keperluan ini ini kita menggunakan property border-top, border-right, border-bottom, dan border-left.

Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div{
     width: 200px;
     height: 200px;
     border-top: 10px solid red;
     border-bottom: 10px solid yellow;
     border-left: 10px solid green;
     border-right: 10px solid blue;
   }
</style>
</head>
<body>
  <div></div>
</body>
</html>

Cara membuat bingkai border untuk setiap sisi dengan CSS

Sekarang setiap sisi border dibuat dengan warna yang berlainan.

Selain untuk tag <div>, kita juga bisa menggunakan border untuk element HTML lain seperti gambar, paragraf, tabel, form, dll. Berikut contoh penggunaan border pada tag <p>:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.garis_tepi1 {
     border: 4px solid red;
}
.garis_tepi2 {
     border: 4px solid #8AF76F;
}
</style>
</head>
<body>
<p class="garis_tepi1">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
<p class="garis_tepi2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
</body>
</html>

Cara membuat bingkai border dengan CSS untuk paragraf

Tampilannya sesuai dengan apa yang kita harapkan. Namun, perhatikan bahwa teks paragraf ini seolah-olah menempel ke sisi border.

Bagaimana caranya agar terdapat sedikit spasi antara border dengan teks? Inilah yang akan kita bahas dalam tutorial berikutnya: pengertian padding dan fungsi property padding dalam CSS.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

12 Comments

  1. Didik Muhammadi
    07 Mar 17
    • Andre
      08 Mar 17
  2. Indomed
    28 Jul 17
    • Andre
      30 Jul 17
  3. sammy
    20 Oct 18
  4. wafid
    14 Nov 18
  5. Anonymous
    14 Nov 18
  6. Ardli Firdaus
    24 Jul 19
    • Andre
      25 Jul 19
  7. Belanja online
    24 Aug 19
  8. amaterasublog
    26 Oct 19

Add Comment