Belajar CSS Part 6 : Membuat Border (Garis Tepi)

Membuat border menggunakan CSS

Properti Border pada CSS

Properti border pada CSS memungkinkan kita untuk menentukan style, lebar, dan warna border dari sebuah elemen border.

Border Style

Properti border-style digunakan untuk menentukan jenis border yang akan ditampilkan.

Berikut adalah properti border yang bisa digunakan:

dotted - Mendefinisikan border bertitik
dashed - Mendefinisikan border putus-putus
solid - Mendefinisikan sebuah border yang solid
double - Mendefinisikan border ganda
groove - Mendefinisikan sebuah border berlekuk 3D. Efeknya tergantung pada nilai border-color
ridge - Mendefinisikan sebuah border bergerigi 3D. Efeknya tergantung pada nilai border-color
inset - Mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color
outset - Mendefinisikan sebuah border awal 3D. Efeknya tergantung pada nilai border-color
none - Mendefinisikan tidak ada border
hidden - Mendefinisikan border tersembunyi

Properti border-style dapat memiliki satu sampai empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).

Contoh

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-style</h2>
<p>Properti-properti berikut adalah untuk menentukan jenis border yang akan ditampilkan:</p>

<p class="dotted">Border titik-titik</p>
<p class="dashed">Border yang putus-putus</p>
<p class="solid">Border yang solid</p>
<p class="double">Border yang double</p>
<p class="groove">Border yang berlekuk 3D</p>
<p class="ridge">Border yang bergerigi 3D</p>
<p class="inset">Border dalam 3D</p>
<p class="outset">Border luar 3D</p>
<p class="none">Border yang ditiadakan</p>
<p class="hidden">Border yang tersembunyi</p>
<p class="mix">Border yang berupa gabungan dari beberapa border</p>

</body>
</html>

Hasilnya:

Border Width

Properti border-width digunakan untuk menentukan lebar dari empat sisi border. Lebar border dapat ditetapkan sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan, yaitu thin, medium, atau thick.

Properti border-width dapat memiliki satu hingga empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).

Contoh

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-width</h2>
<p>Properti ini menentukan lebar dari empat sisi border:</p>

<p class="one">Disini text.</p>
<p class="two">Disini text.</p>
<p class="three">Disini text.</p>
<p class="four">Disini text.</p>
<p class="five">Disini text.</p>
<p class="six">Disini text.</p>
<p class="seven">Disini text.</p>

<p><b>Catatan:</b>
Properti "border-width" tidak berfungsi jika digunakan hanya pada satu sisi saja.
Tentukan terlebih dahulu properti "border-style" untuk mengatur border.</p>

</body>
</html>

Hasilnya:

Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Color

Properti border-color digunakan untuk mengatur warna dari empat garis tepi (border). Dalam border-color, warna paling sering ditentukan dengan menggunakan:

nama warna yang valid - seperti "blue"
nilai HEX - seperti "#0000FF"
nilai RGB - seperti "rgb (0,0,255)"
Transparent

Properti border-color dapat memiliki satu hingga empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).

Contoh

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-color</h2>
<p>Properti ini digunakan untuk menentukan warna dari empat sisi border:</p>

<p class="one">Warna merah solid</p>
<p class="two">Warna hijau solid</p>
<p class="three">Memiliki lebih dari satu warna border</p>

<p><b>Catatan:</b>
Properti "border-width" tidak berfungsi jika digunakan hanya pada satu sisi saja.
Tentukan terlebih dahulu properti "border-style" untuk mengatur border.</p>

</body>
</html>

Hasilnya:

Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Style yang Berbeda

Seperti halnya pada contoh di atas, pada contoh ini kita akan belajar menentukan border-style yang berbeda pada masing-masing sisi border.

Contoh

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Memiliki 2 border yang berbeda</p>

</body>
</html>

Hasilnya:

Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Color

Properti border-color digunakan untuk mengatur warna dari empat garis tepi (border). Dalam border-color, warna paling sering ditentukan dengan menggunakan:

nama warna yang valid - seperti "blue"
nilai HEX - seperti "#0000FF"
nilai RGB - seperti "rgb (0,0,255)"
Transparent

Properti border-color dapat memiliki satu hingga empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).

Contoh

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-color</h2>
<p>Properti ini digunakan untuk menentukan warna dari empat sisi border:</p>

<p class="one">Warna merah solid</p>
<p class="two">Warna hijau solid</p>
<p class="three">Memiliki lebih dari satu warna border</p>

<p><b>Catatan:</b>
Properti "border-width" tidak berfungsi jika digunakan hanya pada satu sisi saja.
Tentukan terlebih dahulu properti "border-style" untuk mengatur border.</p>

</body>
</html>

Hasilnya:

Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Style yang Berbeda

Seperti halnya pada contoh di atas, pada contoh ini kita akan belajar menentukan border-style yang berbeda pada masing-masing sisi border.

Contoh

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Memiliki 2 border yang berbeda</p>

</body>
</html>

Hasilnya:

Contoh di atas memberikan hasil yang sama dengan menggunakan style (CSS) seperti ini:

Contoh

p {
    border-style: dotted solid;
}

Berikut adalah cara kerjanya:

Jika properti border-style memiliki empat nilai:

border-style: dotted solid double dashed;

border atas adalah titik-titik (dotted)
border kanan adalah padat (solid)
border bawah adalah ganda (double)
border kiri adalah putus-putus (dashed)

Jika properti border-style memiliki tiga nilai:

border-style: dotted solid double;

border atas adalah titik-titik (dotted)
border kanan adalah padat (solid)
border bawah adalah ganda (double)

Jika properti border-style memiliki dua nilai:

border-style: dotted solid;

border atas adalah titik-titik (dotted)
border kanan adalah padat (solid)

Jika properti border-style memiliki satu nilai:

border-style: dotted;

keempat border adalah titik-titik (dotted)

Properti border-style digunakan dalam contoh di atas sebaiknya bersamaan dengan properti border-width dan border-color agar memberikan hasil yang sempurna.

Mempersingkat Pengkodean (Shorthand)

Dalam membuat border, kita seringkali dihadapkan dengan banyaknya properti sehingga membuat kita harus mengetikkan banyak kode sehingga menghasilkan hasil yang sesuai dengan yang kita inginkan.

Untuk mempermudah kita dalam pengkodean, kita bisa mempersingkat penulisan kode sehingga kita hanya perlu menuliskan satu properti kemudian diterapkan ke beberapa properti.

Kita perlu menggunakan properti border untuk mempersingkat pengkodean dalam mengabungkan beberapa properti border.

border-width
border-style (wajib)
border-color

Contoh

p {
    border: 5px solid red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Kita juga dapat menentukan semua properti border hanya untuk satu sisi saja:

Contoh

Border kiri

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Kita juga dapat menentukan semua properti border hanya untuk satu sisi saja:

Contoh

Border kiri

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Border bawah

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Border Bulat (Rounded Borders)

Apabila kita ingin membuat border memiliki sudut yang tumpul atau bulat, gunakan properti border-radius.

Contoh

p.normal {
    border: 2px solid red;
}

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

p.bulat2 {
    border: 2px solid red;
    border-radius: 8px;
}

p.bulat3 {
    border: 2px solid red;
    border-radius: 12px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2> Properti border-radius</h2>
<p>Properti ini digunakan untuk membuat border agar membulat</p>

<p class="normal">Border normal</p>
<p class="bulat1">Border bulat</p>
<p class="bulat2">Border bulat</p>
<p class="bulat3">Border bulat</p>

<p><b>Note:</b> Properti "border-radius" tidak didukung di IE8 (dan versi sebelumnya)</p>

</body>
</html>

Hasilnya:

Catatan: Properti "border-radius" tidak didukung di IE8 (dan versi sebelumnya).

Di bawah ini adalah properti-properti border:

border	Menetapkan semua properti border dalam satu deklarasi
border-bottom	Menetapkan semua properti sisi bawah border dalam satu deklarasi
border-bottom-color	Menetapkan warna untuk sisi bawah border
border-bottom-style	Menetapkan style untuk sisi bawah border
border-bottom-width	Menetapkan lebar untuk sisi bawah border
border-color	Menetapkan warna untuk keempat sisi border
border-left	Menetapkan semua properti sisi kiri border dalam satu deklarasi
border-left-color	Menetapkan warna untuk sisi kiri border
border-left-style	Menetapkan style untuk sisi kiri border
border-left-width	Menetapkan lebar untuk sisi kiri border
border-radius	Menetapkan semua sudut border agar membulat
border-right	Menetapkan semua properti sisi kanan border dalam satu deklarasi
border-right-color	Menetapkan warna untuk sisi kanan border
border-right-style	Menetapkan style untuk sisi kanan border
border-right-width	Menetapkan lebar untuk sisi kanan border
border-style	Menetapkan style untuk keempat sisi border
border-top	Menetapkan semua properti sisi atas border dalam satu deklarasi
border-top-color	Menetapkan warna sisi atas border
border-top-style	Menetapkan style sisi atas border
border-top-width	Menetapkan lebar sisi atas border
border-width	Menetapkan lebar di empat sisi border