Pada CSS terdapat dua jenis bingkai yang berbeda, yaitu border dan outline. Sementara border selalu menandakan bingkai persegi, bingkai outline yang diperkenalkan dalam CSS2 ditujukan untuk area yang tidak berbentuk persegi. Dan ada satu perbedaan lagi: Pada outline, penambahan bingkai dilakukan di luar bingkai, sehingga suatu elemen bisa diberi bingkai dengan border dan juga bingkai dengan outline.
Definisi bingkai yang disajikan dalam tutorial ini terutama menarik untuk elemen-elemen yang membentuk paragraf sendiri. Pada dasarnya, definisi tersebut juga dapat diterapkan pada elemen lain.
Menentukan Bingkai
Dengan border, tampilan keseluruhan bingkai di sekitar elemen dapat ditentukan.
Pada properti umum border adalah ringkasan dari nilai-nilai berikut yang akan dibahas lebih detail:
• border-color
• border-style
• border-width
Nilai-nilai untuk masing-masing properti dipisahkan oleh spasi. Urutan dalam menyebutkan properti tidaklah penting. Selain itu, untuk border juga terdapat empat subproperti, yang memungkinkan untuk memberikan informasi tentang warna bingkai, ketebalan bingkai, dan jenis bingkai untuk setiap sisi elemen secara terpisah.
• border-top – Bingkai di atas
• border-right – Bingkai di kanan
• border-bottom – Bingkai di bawah
• border-left – Bingkai di kiri
Contoh di bawah menunjukkan penggunaan border. Dengan definisi ini, bingkai tiga poin lebar, hitam, dan berputus-putus dihasilkan.
<p style="border:3pt solid #000000;"> Selamat datang </p>
Hasilnya di browser:
Warna Bingkai
Melalui border-color, warna bingkai ditentukan. Beberapa nilai yang diperbolehkan adalah:
• transparent – bingkai transparan
• Nilai warna
Jika hanya satu nilai yang diberikan, nilai tersebut berlaku untuk semua sisi bingkai. Untuk mendefinisikan warna yang berbeda untuk setiap sisi, Anda dapat memberikan beberapa nilai yang dipisahkan oleh spasi.
• Dua nilai – nilai pertama untuk warna atas dan bawah, nilai kedua untuk warna kiri dan kanan bingkai.
• Tiga nilai – nilai pertama untuk warna atas, nilai kedua untuk warna kiri dan kanan, nilai ketiga untuk warna bawah bingkai.
• Empat nilai – nilai pertama untuk atas, nilai kedua untuk kanan, nilai ketiga untuk bawah, nilai keempat untuk kiri bingkai.
Selain itu, juga dapat menggunakan subproperti border berikut:
• border-top-color – warna bingkai atas
• border-right-color – warna bingkai kanan
• border-bottom-color – warna bingkai bawah
• border-left-color – warna bingkai kiri
Contoh:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Dan inilah hasilnya di browser:
Jenis Garis
Melalui border-style, jenis garis bingkai dapat ditentukan.
Berikut adalah daftar persyaratan berbagai jenis bingkai yang mungkin:
• none – bingkai tidak terlihat
• dotted – bercak
• dashed – putus-putus
• solid – berputus-putus
• double – ganda berputus-putus
• groove – garis 3D
• ridge – garis 3D
• inset – garis 3D
• outset – garis 3D
Berikut ini adalah contoh bagaimana tampilan dari jenis-jenis bingkai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
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.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Hasilnya di browser:
Jika hanya satu nilai yang diberikan, nilai tersebut berlaku untuk semua sisi bingkai. Untuk mendefinisikan jenis bingkai yang berbeda untuk setiap sisi, Anda dapat memberikan beberapa nilai yang dipisahkan oleh spasi.
• Dua nilai – nilai pertama untuk jenis atas dan bawah, nilai kedua untuk jenis kiri dan kanan bingkai.
• Tiga nilai – nilai pertama untuk jenis atas, nilai kedua untuk jenis kiri dan kanan, nilai ketiga untuk jenis bawah bingkai.
• Empat nilai – nilai pertama untuk atas, nilai kedua untuk kanan, nilai ketiga untuk bawah, nilai keempat untuk kiri jenis bingkai.
Selain itu, juga dapat menggunakan subproperti border berikut:
• border-top-style – jenis bingkai atas
• border-right-style – jenis bingkai kanan
• border-bottom-style – jenis bingkai bawah
• border-left-style – jenis bingkai kiri
Juga berikut contoh:
<p style="border-bottom-style: dashed;"> Garis putus-putus </p>
Dan ini tampilan di browser:
Menetapkan Lebar Bingkai
Dengan border-width menentukan lebar bingkai.
• Penyebutan panjang
• tipis – bingkai tipis
• sederhana – bingkai sedang
• tebal – bingkai tebal
Jika hanya satu nilai yang diberikan, nilai tersebut berlaku untuk semua sisi elemen. Untuk menetapkan ketebalan bingkai yang berbeda untuk setiap sisi, ada dua opsi. Pada opsi pertama, menuliskan beberapa nilai yang dipisahkan dengan spasi.
• Dua Nilai – nilai pertama untuk bagian atas dan bawah, kedua untuk bagian kiri dan kanan.
• Tiga Nilai – nilai pertama untuk bagian atas, kedua untuk bagian kiri dan kanan, ketiga untuk bagian bawah.
• Empat Nilai – nilai pertama untuk atas, kedua untuk kanan, ketiga untuk bawah, dan keempat untuk kiri.
Anda juga dapat menggunakan properti bawah border berikut:
• (border-top-width) – ketebalan bingkai atas
• (border-right-width) – ketebalan bingkai kanan
• (border-bottom-width) – ketebalan bingkai bawah
• (border-left-width) – ketebalan bingkai kiri
Contoh:
<p style="border-width:2px;border-style: dot;"> Selamat datang </p>
Warna Bingkai untuk garis luar
Melalui properti outline-color menentukan warna bingkai. Penyebutannya identik dengan border-color.
• invert – menampilkan warna terbalik. Warna ini dibuat dengan membalik semua bit nilai warna heksadesimal.
• Penyebutan warna
Contoh:
<p style="outline-width: sederhana; outline-style: solid; outline-color: biru;"> PSD-Tutorials.de </p>
Ini tampilan di browser:
Jenis Bingkai untuk garis luar
Penetapan outline-style menentukan jenis kontur. Nilai yang diperbolehkan sama dengan border-style.
• none – bingkai tak terlihat
• titik-titik – bertitik-titik
• garis putus-putus – bergaris putus-putus
• solid – bergerak
• double – digandakan
• groove – garis 3D
• ridge – garis 3D
• inset – garis 3D
• outset – garis 3D
Contoh:
<p style="outline-style:solid;outline-width:2px; outline-color:merah;"> PSD-Tutorials.de </p>
Ketebalan Bingkai untuk garis luar
Penetapan outline-width sama dengan border-width. Juga di sini menentukan ketebalan bingkai. Untuk membuat garis bingkai terlihat, selalu kombinasikan outline-width dengan outline-style.
• sederhana – bingkai sedang
• tipis – bingkai tipis
• tebal – bingkai tebal
• Penyebutan panjang – menentukan ketebalan bingkai
Contoh:
<p style="outline-width: tipis;outline-style: solid; outline-color: merah;">
Selamat datang
</p>
Dan seperti halnya dengan border, untuk bingkai outline juga ada properti umum.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red sederhana tebal;
outline:hijau titik sederhana;
}
</style>
</head>
<body>
<p>Selamat datang di PSD-Tutorials.de!</p>
</body>
</html>
Ini kemudian menggabungkan properti-propeert
• outline-width
• outline-style
• outline-color
Prinsipnya di sini sama dengan properti border umum.
