Pengertian dan Fungsi Border Pada CSS
Tutorial kali ini kita akan membahas mengenai pengertian dan fungsi border pada CSS.
Sebelumnya kita telah membahas mengenai penggunaan dan fungsi Background untuk CSS.
Border sering digunakan dalam desain tampilan website.
Apa Pengertian dan Fungsi Border pada CSS?
Border kalo kita terjemahkan ke Bahasa Indonesia artinya “batas / pinggir“, mungkin digunakan untuk membatasi.
Border pada CSS menyediakan pengaturan tampilan desain website baik dari style, lebar (width), maupun warna (color) dari sebuah elemen border.
Untuk selanjutnya kita akan membahas satu per satu mengenai penggunaan border ini.
1. Border Style CSS (Corak Border)
Properti border-style digunakan untuk memilih tipe border yang akan ditampilkan. Ada banyak tipe border pada CSS seperti titik dll. Berikut ini penjelasannya.
dotted – untuk membuat border titik
dashed – untuk membuat border garis
solid – untuk membuat border solid (garis tebal)
double – untuk membuat border double
groove – untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-color.
ridge – untuk membuat border 3D ridge. Efek ini juga terjadi ketika ada nilai border-color.
inset – untuk membuat 3D border masuk kedalam
outset – untuk membuat 3D border
none – untuk membuat tidak ada border
hidden – untuk membuat border tersembunyi
Untuk properti border-style ini dapat mempunyai satu sampai dengan empat nilai (top border, right border, bottom border, dan left border).
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p.titik {border-style:dotted;}
p.garis {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.campur {border-style: dashed dotted solid double;}
</style>
</head>
<body>
<h1>Contoh Properti border-style</h1>
<p class="titik">Border titik</p>
<p class="garis">Border garis-garis</p>
<p class="solid">Border solid</p>
<p class="double">Border double</p>
<p class="groove">Border groove</p>
<p class="ridge">Border ridge</p>
<p class="inset">Border inset</p>
<p class="outset">Border outset</p>
<p class="none">Tidak ada border </p>
<p class="hidden">Border tersembunyi</p>
<p class="campur">Border campuran</p>
</body>
</html>
Output Kode:
2. Border Width CSS (Lebar Border)
Properti dari border-width digunakan untuk menentukan lebar dari keempat border. Lebar dapat diatur menjadi ukuran yang spesifik (dalam px, pt, cm, em, dan lainnya). Atau bisa juga menggunakan 3(tiga) nilai pre-defined: thin, medium, atau tick.
Properti border-width ini bisa mempunyai satu sampai dengan empat nilai (untuk top border, right border, bottom border, dan left border).
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
border-style: solid;
border-width: medium;
}
p.dua {
border-style: solid;
border-width: 4px;
}
p.tiga {
border-style: dotted;
border-width: thick;
}
p.empat {
border-style: double;
border-width: 3px 5px 4px 18px;
}
p.lima {
border-style: solid;
border-width: thick;
}
</style>
</head>
<body>
<h1>Contoh Properti dari border-width</h1>
<p class="satu">Contoh Teks<p>
<p class="dua">Contoh Teks<p>
<p class="tiga">Contoh Teks<p>
<p class="empat">Contoh Teks<p>
<p class="lima">Contoh Teks<p>
</body>
</html>
Output Kode:
3. Border Color (Warna Border)
Properti border-color digunakan untuk mengatur warna dari empat border. Warna dari border dapat diatur dengan menggunakan perintah:
*nama – menggunakan nama dari warna, misalnya “red”.
*Hex – menggunakan nilai hexadesimal, misalnya “#fff000”
*RGB – menggunakan nilai dari RGB (Red, Green, Blue), misalnya “rgb(0,255,0)”.
*transparent
Pada property border-color bisa mempunyai nilai satu sampai dengan empat nilai (untuk border atas, border kanan, border bawah dan border kiri).
Jika properti dari border-color tidak didefinisikan, maka otomatis akan diwariskan dari element. Perlu diingat… untuk mendefinisikan warna properti border-color harus menggunakan properti border-style.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
border-style: solid;
border-color: green;
}
p.dua {
border-style: solid;
border-color: blue;
}
p.tiga {
border-style: solid;
border-color: green red yellow orange;
/*atas->hijau, kanan->merah, bawah->kuning, kiri->orange */
}
</style>
</head>
<body>
<h1>Contoh Properti border-color CSS</h1>
<p class="satu">Warna border hijau</p>
<p class="dua">Warna border biru</p>
<p class="tiga">Warna border asik</p>
</body>
</html>
Output Kode:
Bagaimana Cara Menggunakan Border Satu Sisi…?
Dari contoh diatas kita dapat melihat bahwa untuk membuat border pada setiap satu sisi bisa dilakukan. Pada CSS, juga terdapat properti spesifik untuk mendefinisikan setiap sisi border (atas, kanan, bawah, dan kiri). Anda bisa mencoba kode dibawah ini untuk lebih mengerti tentang pengertian dan fungsi border pada CSS…
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: dashed;
}
</style>
</head>
<body>
<p>Contoh Border style yang beda pada setiap sisi</p>
</body>
</html>
Output Kode:
Pada contoh sebelumnya juga akan mendapat hasil sama ketika kode seperti ini.
<!DOCTYPE html>
<html>
<head><style>
p {
border-style: solid dashed;
}
</style>
</head>
<body>
<p>Contoh Border style yang beda pada setiap sisi</p>
</body>
</html>
Output Kode:
Maka, cara kerja dari border-style lebih detailnya…
*Jika properti border-style punya empat nilai:
border-style: solid double dashed none;
– border atas solid
– border kanan double
– border bawah dashed
– border kiri none
*Jika properti border-style punya tiga nilai:
border-style: solid double dashed;
– border atas solid
– border kanan dan kiri double
– border bawah dashed
*Jika properti border-style punya dua nilai:
border-style: solid double;
– border atas dan bawah solid
– border kanan dan kiri double
*Jika properti border-style punya satu nilai:
border-style: solid;
– semua keempat border adalah solid
Bagaimana Cara Menyingkat Penulisan Properti Border…?
Seperti yang anda lihat pada contoh sebelumnya, ada banyak properti untuk penerapan border. Menyingkat kode, juga mungkin diterapkan dalam satu properti border.
Menyingkat properti border dilakukan dengan urutan properti : border-width, border-style (harus ada), dan border-color.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 3px solid red;
}
</style>
</head>
<body>
<h1>Contoh Properti Border</h1>
<p>Contoh gabungan dari properti border</p>
</body>
</html>
Output Kode:
Selain itu, kita juga bisa mendefinisikan border hanya satu sisi saja. Berikut ini untuk lebih jelasnya untuk memahami pengertian dan fungsi border pada CSS…
1. Left Border
Menggunakan border hanya pada sisi kiri saja.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left: 5px solid blue;
background-color: #999;
}
</style>
</head>
<body>
<h2>Contoh Properti border-left</h2>
<p>Belajar CSS memang sangat menyenangkan... apalagi bisa membuat warna warni tulisan... hehehe</p>
</body>
</html>
Output Kode:
2. Bottom Border
Anda juga bisa menggunakan border hanya pada sisi bawah saja.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 4px solid red;
background-color: #999;
}
</style>
</head>
<body>
<h1>Contoh Properti border-bottom</h1>
<p>Belajar CSS sangat asik sekali.... kita bisa buat website dengan tampilan elegan</p>
</body>
</html>
Output Kode:
3. Rounded Borders
Kita bisa menggunakan perintah properti border-radius untuk menambahkan lekukan seperti lingkaran pada elemen border. Namun, border-radius ini tidak didukung oleh IE8 dan sebelumnya.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.lingkaran1 {
border: 3px solid blue;
border-radius: 5px;
}
p.lingkaran2 {
border: 3px solid blue;
border-radius: 8px;
}
p.lingkaran3 {
border: 3px solid blue;
border-radius: 14px;
}
</style>
</head>
<body>
<h1>Contoh Properti border-radius</h1>
<p>Properti "border-radius" ini digunakan untuk menambahkan lingkaran pada masing - masing border.
</p>
<p class="normal">Border Normal</p>
<p class="lingkaran1">Border Agak Melingkar</p>
<p class="lingkaran2">Border Melingkar</p>
<p class="lingkaran3">Border Lebih Melingkar</p>
</body>
</html>
Output Kode:
Demikian tutorial belajar CSS mengenai pengertian dan fungsi border pada CSS untuk mengatur tata letak website.
Selanjutnya kita akan membahas mengenai cara menggunakan margin pada CSS.
Semoga tutorial ini bermanfaat dan terima kasih.