-->

Iklan bawah header

Belajar CSS : Cara Membuat Garis Tepi (Border) Dengan CSS

Belajar CSS

Property border pada CSS digunakan untuk menentukan garis tepi pada elemen HTML. Terdapat tiga nilai pada property border yaitu border-width untuk menentukan lebar garis tepi, border-style untuk menentukan corak garis tepi dan border-color untuk menentukan warna pada garis tepi.

Contoh penggunaan property border:


<!DOCTYPE html>
<html>
<head>
<style>
.border1 { border: 5px solid red ; }
.border2 { border: 5px dotted yellow; }
.border3 { border: 5px dashed blue; }
</style>
</head>
<body>

<h2 class="border1"> Heading dengan garis tegas merah </h2>
<h2 class="border2"> Heading dengan garis titik-titik kuning </h2>
<h2 class="border3"> Heading dengan garis putus-putus biru </h2>

</body>
</html>
Berikut hasilnya: Contoh border

Lalu bagaimana caranya agar masing-masing sisi pada garis tepi memiliki lebar, corak dan warna yang berbeda?

CSS juga memiliki property lain yang terkait dengan border untuk menentukan border-width, border-style dan border-color pada masing-masing sisi.

border-width

border-width merupakan nilai pada property border yang diberikan untuk menentukan lebar pada garis tepi. Garis tepi yang dibuat memiliki lebar yang sama pada setiap sisinya. jika kamu ingin membuat lebar garis tepi yang berbeda pada masing-masing sisinya, kamu bisa menggunakan property berikut ini:

  • border-right-width untuk menentukan lebar garis tepi sisi kanan
  • border-bottom-width untuk menentukan lebar garis tepi sisi bawah
  • border-left-width untuk menentukan lebar garis tepi sisi kiri
  • border-top-width untuk menentukan lebar garis tepi sisi atas

Untuk lebih jelasnya lihat contoh berikut ini:


<!DOCTYPE html>
<html>
<head>
<style>
.contohborder {
	border-top-width: 4px;
	border-right-width: 8px;
	border-bottom-width: 12px;
	border-left-width: 16px;
	border-style: solid;
	border-color: red;
}
</style>
</head>
<body>

<p class="contohborder"> Property border CSS digunakan untuk menentukan garis tepi pada elemen HTML. </p>

</body>
</html>

Hasilnya:

border-width

border-style

border-style merupakan nilai yang diberikan untuk menentukan corak garis tepi. Setiap sisi mempunyai corak garis tepi yang sama. Jika kamu menginginkan corak garis tepi yang berbeda pada setiap sisinya, kamu bisa menentukan corak garis tepi secara individu dengan menggunakan property berikut ini:

  • border-right-style untuk menentukan corak garis tepi sisi kanan.
  • border-bottom-style untuk menentukan corak garis tepi sisi bawah.
  • border-left-style untuk menentukan corak garis tepi sisi kiri.
  • border-top-style untuk menentukan corak garis tepi sisi atas.

Ada berbagai macam corak garis tepi yang bisa kamu gunakan. Berikut daftar corak garis tepi yang bisa kamu gunakan:

  • none - tanpa garis batas
  • dotted - garis titik-titik
  • solid - satu garis tegas
  • double - dua garis tegas
  • dashed - garis putus-putus
  • groove - garis tepi seolah-olah diukir kedalam
  • ridge - kebalikan dari corak groove
  • outset - garis nampak seperti keluar di kanvas
  • inset - garis seperti tertanam di kanvas
  • hidden - sama seperti corak none

border-color

border-color merupakan nilai ketiga pada property border yang diberikan untuk menentukan warna pada garis tepi. Setiap sisinya, baik sisi kanan, atas, kiri dan bawah memiliki warna garis tepi yang sama. Jika kamu menginginkan warna garis tepi yang berbeda untuk setiap sisinya, kamu dapat menggunakan property berikut ini untuk menentukan warna garis tepi secara individu.

  • border-right-color untuk menentukan warna garis tepi sisi kanan
  • border-top-color untuk menentukan warna garis tepi sisi atas
  • border-left-color untuk menentukan warna garis tepi sisi kiri
  • border-bottom-color untuk menentukan warna garis tepi sisi bawah

CSS sendiri memiliki beberapa cara untuk mendefinisikan warna. Warna pada CSS dapat kamu tentukan melalui HTML color names, Hexadecimal color, RGB color, RGBA color, HSL color dan HSLA color.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel