Border merupakan batas tepi luar suatu elemen HTML. Dalam keadaan default, border tidak terlihat karena border style dalam posisi kosong (none). Namun saat border diatur ke dalam bentuk solid, border akan terlihat mengitari di sekeliling elemen dengan ketebalan dan warna tertentu. Biasanya jenis border yang sering digunakan adalah berbentuk garis lurus.
Jenis border atau border style sebenarnya memiliki bermacam bentuk gaya. Selain dalam bentuk solid dengan garis padat lurus, terdapat beberapa jenis border lainnya seperti dotted, dashed, double, inset, outset, groove dan ridge. Jenis border tersebut sudah didukung oleh browser modern, jadi anda bisa menggunakannya dengan leluasa.
Untuk menggunakan border style, yang perlu dilakukan terlebih dahulu adalah menciptakan elemen lalu mengatur jenis border, ketebalan border dan juga warna border-nya. Metoda dengan menggunakan CSS - jalan pintas atau CSS - shorthand dapat digunakan untuk menetapkan jenis border, ketebalan dan warna border.
border: solid 2px maroon;
Penulisan di atas artinya, border diatur dengan menggunakan jenis border (border-style) solid, ketebalan border (border-width) 2px dan warna border (border-color) maroon.
Cara lain yang dapat digunakan adalah menetapkan property border satu persatu.
border-style: dashed;
border-width: 3px;
border-color: navy;
Penulisan di atas artinya, border diatur dengan menggunakan jenis border (border-style) dashed, ketebalan border (border-width) 3px dan warna border (border-color) navy.
Contoh berikut adalah halaman dengan elemen yang menggunakan border-style berbeda :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin:10px;
padding:20px;
color:teal;
text-align:center;
}
</style>
</head>
<body>
<div style="border:none 3px orange;">Paragraf ini menggunakan border style none</div>
<div style="border:hidden 3px orange;">Paragraf ini menggunakan border style hidden</div>
<div style="border:solid 3px orange;">Paragraf ini menggunakan border style solid</div>
<div style="border:dotted 3px orange;">Paragraf ini menggunakan border style dotted</div>
<div style="border:dashed 3px blue;">Paragraf ini menggunakan border style dashed</div>
<div style="border:double 6px blue;">Paragraf ini menggunakan border style double</div>
<div style="border:groove 6px green;">Paragraf ini menggunakan border style groove</div>
<div style="border:ridge 6px green;">Paragraf ini menggunakan border style ridge</div>
<div style="border:inset 6px magenta;">Paragraf ini menggunakan border style inset</div>
<div style="border:outset 6px magenta;">Paragraf ini menggunakan border style outset</div>
</body>
</html>
Hasil Script :
Catatan : Pada border yang menggunakan jenis border style double, groove, ridge, inset dan outset ketebalan border minimal harus diatas 3px. Jika kurang dari jumlah tersebut, hasil yang ditampilkan masih dalam bentuk garis solid dan efek yang dihasilkan oleh CSS tidak terjadi banyak perubahan terutama border dalam bentuk 3D groove dan lainnya.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
