Membuat Garis Tepi (Border) Dengan CSS

ARTIKEL POPULER

Details: Category: CSS; Hits: 53812

Membuat garis border di CSS — Membuat Garis Tepi (Border) Di CSS

Selain HTML, CSS adalah teknologi utama untuk membuat laman web. CSS bertanggung jawab pada penyajian agar dihasilkan laman web yang menarik. CSS dapat meliputi banyak hal seperti layout, warna, font, margin, padding, alignment dan sebagainya. Salah satu property CSS yang juga sangat sering digunakan di dalam pembuatan laman web adalah border (garis tepi).

Property border CSS digunakan untuk menentukan garis tepi pada elemen HTML. Property border memerlukan tiga nilai. Nilai pertama adalah border-width untuk menentukan lebar garis tepi, nilai kedua adalah border-style untuk menentukan corak garis tepi apakah berupa garis tegas, garis putus-putus, garis titik-titik dan sebagainya dan nilai ketiga adalah border-color untuk menentukan warna garis tepi. Sintaksis dari property border CSS adalah sebagai berikut:

border: border-width border-style border-color;

border adalah property CSS untuk menentukan lebar, corak dan juga warna garis tepi pada elemen HTML yang paling ringkas. Dengan menggunakan property border CSS, semua sisi, baik sisi atas, kanan, bawah dan kiri menggunakan lebar, corak dan warna garis yang sama. Berikut ini adalah contoh sederhana penggunakan property border:

Baca artikel:

<!DOCTYPE html>
<html>
<head>
<style>
.fivesolidblue { border: 5px solid blue; }
.fivedottedbrown { border: 5px dotted brown; }
.fivedashedblue { border: 5px dashed red; }
</style>
</head>
<body>

<h2 class="fivesolidblue">Heading dengan garis tegas biru.</h2>
<h2 class="fivedottedbrown">Heading dengan garis titik-titik coklat.</h2>
<h2 class="fivedashedblue">Heading dengan garis putus-putus merah.</h2>

</body>
</html>

Berikut ini adalah hasil rendering di web browser Google Chrome:

Lalu bagaimana bila Anda ingin menentukan garis tepi untuk elemen HTML dengan lebar, corak dan warna berbeda untuk masing-masing sisi? Anda perlu menentukan lebar, corak dan warna secara individu. CSS juga memiliki property lain terkait dengan border untuk menentukan border-width, border-style dan border-color di masing-masing sisi.

1. border-width.

Dari sintaksis property border di atas, border-width adalah nilai pertama yang diberikan untuk menentukan lebar garis tepi. Setiap sisi, baik sisi atas, kanan, bawah dan kiri mempunya lebar garis tepi yang sama. Bila Anda menginginkan lebar garis tepi berbeda untuk masing-masing sisi, Anda dapat menentukan lebar garis tepi secara individu atau terpisah menggunakan property berikut ini:

border-top-width untuk menentukan lebar garis tepi sisi atas.
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.

Berikut ini adalah contoh sederhana memberi garis tepi dengan lebar berbeda untuk setiap sisi pada paragraf atau elemen <p>.

<!DOCTYPE html>
<html>
<head>
<style>
.lebargarissisiberbeda {
   border-top-width: 2px;
   border-right-width: 6px;
   border-bottom-width: 10px;
   border-left-width: 14px;
   border-style: solid;
   border-color: blue;
}
</style>
</head>
<body>

<p class="lebargarissisiberbeda">Property border CSS digunakan untuk menentukan garis tepi pada elemen HTML. Property border memerlukan tiga nilai yaitu border-width, border-style dan border-color.</p>

</body>
</html>

Berikut ini adalah hasil rendering di web browser Google Chrome:

2. border-style.

Dari sintaksis property border di atas, border-style adalah nilai kedua yang diberikan untuk menentukan corak garis tepi. Setiap sisi, baik sisi atas, kanan, bawah dan kiri mempunya corak garis tepi yang sama. Bila Anda menginginkan corak garis tepi berbeda untuk masing-masing sisi, Anda dapat menentukan corak garis tepi secara individu menggunakan property berikut ini:

border-top-style untuk menentukan corak garis tepi sisi atas.
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.

Ada cukup banyak corak garis tepi yang bisa digunakan. Anda dapat menggunakan salah satu dari daftar beriku ini:

none - tanpa garis batas atau sama dengan border-width: 0;.
solid - satu garis tegas.
dotted - garis titik-titik.
dashed - garis putus-putus.
double - dua garis tegas.
groove - garis tepi seolah-olah diukir ke dalam.
ridge - kebalikan dari corak groove.
inset - garis nampak seperti tertanam di kanvas.
outset - garis nampak seperti keluar di kanvas.
hidden - sama seperti corak none.

Berikut ini adalah contoh sederhana memberi garis tepi dengan corak berbeda untuk setiap sisi pada paragraf atau elemen <p>.

<!DOCTYPE html>
<html>
<head>
<style>
.corakgarissisiberbeda {
   border-width: 8px;
   border-top-style: dotted;
   border-right-style: solid;
   border-bottom-style: dashed;
   border-left-style: double;
   border-color: red;
}
</style>
</head>
<body>

<p class="corakgarissisiberbeda">Property border CSS digunakan untuk menentukan garis tepi pada elemen HTML. Property border memerlukan tiga nilai yaitu border-width, border-style dan border-color.</p>

</body>
</html>

Berikut ini adalah hasil rendering di web browser Google Chrome:

Di bagian elemen style atau tag <style> di atas, penulisan border-top-style: dotted;, border-right-style: solid;, border-bottom-style: dashed; dan border-left-style: double; juga dapat ditulis menjadi border-style: dotted solid dashed double; sehingga menjadi lebih ringkas seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
<style>
.corakgarissisiberbeda {
   border-width: 8px;
   border-style: dotted solid dashed double;
   border-color: red;
}
</style>
</head>

3. border-color.

Dari sintaksis property border di atas, border-color adalah nilai ketiga yang diberikan untuk menentukan warna garis tepi. Setiap sisi, baik sisi atas, kanan, bawah dan kiri mempunya warna garis tepi yang sama. Bila Anda menginginkan warna garis tepi berbeda untuk masing-masing sisi, Anda dapat menentukan warna garis tepi secara individu menggunakan property berikut ini:

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

CSS sendiri memiliki beberapa cara mendefinisikan warna. Anda dapat menentukan warna di CSS melalui Hexadecimal color, HTML color names, RGB color, RGBA color, HSL color dan HSLA color. Berikut ini adalah contoh sederhana memberi garis tepi dengan warna berbeda untuk setiap sisi pada paragraf atau elemen <p>.

Baca artikel Beberapa Cara Mendefinisikan Warna Di CSS

<!DOCTYPE html>
<html>
<head>
<style>
.warnagarissisiberbeda {
   border-width: 10px;
   border-style: solid;
   border-top-color: red;
   border-right-color: DarkGoldenRod;
   border-bottom-color: blue;
   border-left-color: BlueViolet;
}
</style>
</head>
<body>

<p class="warnagarissisiberbeda">Property border CSS digunakan untuk menentukan garis tepi pada elemen HTML. Property border memerlukan tiga nilai yaitu border-width, border-style dan border-color.</p>

</body>
</html>