بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Baca Juga :
Property border (garis tepi, red), CSS digunakan untuk menentukan garis tepi pada elemen HTML di halaman web. Property border memerlukan tiga hal penting. Tiga hal penting itu sering disebut dengan Nilai. Dan 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. Syntax dari property border CSS dapat dijabarkan sebagai berikut :
border: border-width border-style border-color;
Border merupakan sebuah 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. Dan kesemuanya bisa ditentukan sesuai perintah yang tersemat dalam coding didalamnya.
Baca Juga :
Kemudian bila kita ingin menentukan garis tepi untuk elemen HTML dengan lebar, corak dan warna berbeda untuk masing-masing sisi bagaimana? Apakah bisa? Kita perlu menentukan lebar, corak dan warna secara individu atau sendiri-sendiri. Artinya CSS juga memiliki property lain terkait dengan border untuk menentukan border-width, border-style dan border-color di masing-masing sisinya.
1. border-width
Dari syntax property border di atas, border-width adalah Nilai pertama yang diberikan untuk menentukan lebar garis tepi. Seperti yang telah disebutkan diatas dalam uraian pertama, maka setiap sisi, baik sisi atas, kanan, bawah dan kiri mempunyai lebar garis tepi yang sama. Bila menginginkan lebar garis tepi berbeda untuk masing-masing sisi, maka 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>
.alifasolidred { border: 5px solid #ff0000; }
.alifadottedblue { border: 5px dotted #1F3A93; }
.alifadashedgreen { border: 5px dashed #00FF00; }
</style>
</head>
<body>
<h2 class="alifasolidred">Heading dengan garis tegas Merah.</h2>
<h2 class="alifadottedblue">Heading dengan garis titik-titik Biru.</h2>
<h2 class="alifadashedgreen">Heading dengan garis putus-putus Hijau.</h2>
<h3>www.alifacode.com</h3>
</body>
</html>
Rendering dengan browser Mozilla Firefox
2. border-style
Dilihat dari syntax property border diatas, maka 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. Kemudian apabila kalian ingin corak garis tepi berbeda untuk masing-masing sisi, kalian 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. Kalian bisa menggunakan salah satu dari daftar berikut 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>
.bentuksisibeda {
border-width: 10px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
border-color: blue;
}
</style>
</head>
<body>
<p class="bentuksisibeda">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>
<h3>www.alifacode.com</h3>
</body>
</html>
Rendering dengan browser Mozilla Firefox
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>
.bentuksisibeda {
border-width: 10px;
border-top-style: dotted solid dashed double;
border-color: blue;
}
</style>
</head>
<body>
<h3>www.alifacode.com</h3>
</body>
</html>
3. border-color.
Dari syntax property border diatas, 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 kalian ingin warna garis tepi berbeda untuk masing-masing sisi, maka kalian bisa 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 untuk mendefinisikan sebuah warna. Kalian 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>.
<!DOCTYPE html>
<html>
<head>
<style>
.warnagarissisibeda {
border-width: 10px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
</style>
</head>
<body>
<p class="warnagarissisibeda">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>
<h3>www.alifacode.com</h3>
</body>
</html>
Rendering dengan browser Mozilla Firefox
Ya agak melelahkan ya teman-teman. Tapi memang ada sebuah ungkapan berbunyi seperti ini : "Berakit rakit ke hulu, berenang kemudian ke tepian" -- Setelah kesulitan belajar pasti ada hikmah dibelakangnya yang kaya manfaat untuk diri kita. Sebenarnya itu semua bila dilakukan sedikit demi seidikit nanti juga tidak terasa sulit kok. Mungkin bagi kalian untuk mencoba mempelajari lebih dalam lagi tentang CSS. Insyaallah tidak sulit kok menerapkan cara-cara yang sudah diberikan sebelumnya. Karena dengan semakin tekunnya kalian, bukan hal yang mustahil mengutak-atik bahasa program web seperti HTML, CSS dan sebagainya semakin mudah.
Seperti yang termaktub dalam kitab suci Al Qur'an. "Bahwa sesungguhnya Allah SWT tidak akan mengubah nasib suatu kaum sehingga mereka mengubah keadaan yang ada pada diri mereka sendiri." -- (QS. Ar-Ra'd: 11). Paling tidak kita sudah berusaha ya teman-teman untuk menemukan sebuah solusi dari akar suatu permasalahan. Salam Blogger.
Label Postingan :
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Mempelajari Pembuatan Garis Tepi (Border) Dengan Teknik CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
