CSS Border Properties
CSS Border Properties
CSS border properties memungkinkan anda untuk menentukan style dan warna border suatu element's.
Border Style
border-style property menentukan bagaimana border akan ditampilkan.
border properties tidak memiliki efek apapun kecuali untuk menentukan border-style saja. Nilai-nilai border-style:
None: Mendefinisikan tanpa border
Dotted: Mendefinisikan sebuah dotted border
Berikut Nilai yang digunakan:
<div style="border: 3px dotted rgb(0, 0, 0); padding: 5px;">
Dotted: Mendefinisikan sebuah dotted border</div>
Dotted: Mendefinisikan sebuah dotted border</div>
Dashed: Mendefinisikan sebuah dashed border
Berikut Nilai yang digunakan:
<div style="border: 3px dashed rgb(0, 0, 0); padding: 5px;">
Dashed: Mendefinisikan sebuah dashed border</div>
Dashed: Mendefinisikan sebuah dashed border</div>
Solid: Mendefinisikan sebuah solid border
Berikut Nilai yang digunakan:
<div style="border: 3px solid rgb(0, 0, 0); padding: 5px;">
Solid: Mendefinisikan sebuah solid border</div>
Solid: Mendefinisikan sebuah solid border</div>
Double: Mendefinisikan dua borders. Lebar kedua borders adalah sama yaitu nilai border-width
Berikut Nilai yang digunakan:
<div style="border: 5px double rgb(0, 0, 0); padding: 5px;">
Double: Mendefinisikan dua borders. Lebar kedua borders adalah sama yaitu nilai border-width</div>
Double: Mendefinisikan dua borders. Lebar kedua borders adalah sama yaitu nilai border-width</div>
Groove: Mendefinisikan sebuah grooved border 3D. Efeknya tergantung pada nilai border-color
Berikut Nilai yang digunakan:
<div style="border: 7px groove rgb(152, 191, 33); padding: 5px;">
Groove: Mendefinisikan sebuah grooved border 3D. Efeknya tergantung pada nilai border-color</div>
Groove: Mendefinisikan sebuah grooved border 3D. Efeknya tergantung pada nilai border-color</div>
Ridge: Mendefinisikan sebuah ridged border 3D. Efeknya tergantung pada nilai border-color
Berikut Nilai yang digunakan:
<div style="border: 7px ridge rgb(152, 191, 33); padding: 5px;">
Ridge: Mendefinisikan sebuah ridged border 3D. Efeknya tergantung pada nilai border-color</div>
Ridge: Mendefinisikan sebuah ridged border 3D. Efeknya tergantung pada nilai border-color</div>
Inset: Mendefinisikan sebuah inset border 3D. Efeknya tergantung pada nilai border-color
Berikut Nilai yang digunakan:
<div style="border: 7px inset rgb(152, 191, 33); padding: 5px;">
Inset: Mendefinisikan sebuah inset border 3D. Efeknya tergantung pada nilai border-color</div>
Inset: Mendefinisikan sebuah inset border 3D. Efeknya tergantung pada nilai border-color</div>
Outset: Mendefinisikan sebuah outset border 3D. Efeknya tergantung pada nilai border-color
Berikut Nilai yang digunakan:
<div style="border: 7px outset rgb(152, 191, 33); padding: 5px;">
Outset: Mendefinisikan sebuah outset border 3D. Efeknya tergantung pada nilai border-color</div>
Outset: Mendefinisikan sebuah outset border 3D. Efeknya tergantung pada nilai border-color</div>
Border Width
border-width property digunakan untuk mengatur lebar border.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai pre-defined: thin (tipis), medium (sedang), atau thick (tebal).
Catatan: "border-width" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur border pertama.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border Color
border-color property digunakan untuk mengatur warna border. Warna dapat diatur dengan:
- nama - nama warna yang menentukan, seperti "red"
- RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
- Hex - menetapkan nilai hex, seperti "# ff0000"
Anda juga dapat mengatur warna perbatasan untuk "transparan".
Catatan: "border-color" property tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur border pertama.
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Border - Individual sides
Dalam CSS memungkinkan untuk menentukan border yang berbeda pada setiap sisi:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Contoh di atas juga dapat diatur dengan properti tunggal:
border-style:dotted solid;
border-style property dapat memiliki satu sampai empat nilai, seperti:
- border-style:dotted solid double dashed;
- border atas dotted
- border kanan solid
- border bawah double
- border kiri dashed
- border-style:dotted solid double;
- border atas dotted
- borders kanan dan kiri solid
- border bawah double
- border-style:dotted solid;
- borders atas dan bawah dotted
- borders kanan dan kiri solid
- border-style:dotted;
- borders ke empat sisi dotted
Border - Shorthand property
Seperti yang anda lihat pada contoh di atas, ada banyak properti yang dapat digunakan untuk membuat sebuah border.
Untuk meng-singkat kode, itu sangat memungkinkan, karena semua border properti dapat disatukan dalam satu properti. Ini disebut shorthand property.
Berikut adalah property singkat untuk border properties:
border:5px solid red;
Dimana urutan nilai-nilainya adalah:
- border-width
- border-style
- border-color
Selesai.
Sumber: w3schools
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon