CSS : Border

Properti Border CSS

Properti border CSS memungkinkan kalian untuk menentukan area border sebuah kotak. Border dapat berupa style yang telah ditentukan seperti, garis padat, garis ganda, garis putus-putus, dll. Atau dapat berupa gambar. Bagian berikut akan menjelaskan kepada kalian cara mengatur berbagai properti yang mendefinisikan style (border-style), warna (border-color), dan ketebalan border-width) border.

Properti Border-width

Properti border-width menentukan lebar area border. Ini adalah properti shorthand untuk mengatur ketebalan keempat sisi elemen border pada saat yang bersamaan. Berikut contohnya:

p {
    border-width: medium 10px thick 15px;
}

Catatan: Jika nilai untuk properti border-width tidak ada atau tidak ditentukan, maka nilai border-width default (medium) yang akan digunakan.

Properti Border-style

Properti border-style menetapkan gaya batas kotak seperti: solid, putus-putus, dll. Ini adalah properti singkatan untuk mengatur gaya garis untuk keempat sisi dari elemen border.

Properti border-style dapat mengambil salah satu dari nilai berikut: none, hidden, dashed, dotted, double, groove, inset, outset, ridge dan solid.

none: Menentukan tidak ada border.

hidden: Menentukan hidden border.

dotted: Menentukan dotted border

dashed: Menentukan dashed border

solid: Menentukan solid border

double: Menentukan dua borders. Lebar kedua batas sama dengan border-width value

groove: Menentukan 3D grooved border. Efeknya tergantung pada nilai border-color

ridge: Menentukan 3D ridged border. Efeknya tergantung pada nilai border-color

inset: Menentukan 3D inset border. Efeknya tergantung pada nilai border-color

outset:  Menentukan 3D outset border. Efeknya tergantung pada nilai border-color

Berikut contohnya:

p {
    border-style: dotted;
}

Properti Border-color

Properti border-color menentukan warna dari border kotak. Ini juga merupakan properti shorthand untuk mengatur warna semua sisi border elemen. Berikut contohnya:

p {
    border-style: solid;
    border-color: #ff0000;
}

Properti Border Shorthand

Properti border CSS merupakan properti shorthand untuk menetapkan satu atau lebih dari properti border masing-masing dengan menggunakanborder-style, border-width and border-color dalam satu aturan saja. Berikut contohnya:

p {
    border: 5px solid #ff4500;
}

Jika nilai untuk properti border individual dihilangkan atau tidak ditentukan saat mengatur properti border shorthand, maka nilai yang akan digunakan untuk properti tersebut yaitu nilai defaultnya jika ada.

Dalam contoh ini, border-nya akan menjadi garis hitam pekat (solid black) dengan lebar 5px:

p {
    color: black;
    border: 5px solid;
}

Tetapi, dalam kasus border-style, menghilangkan nilai (value) akan menyebabkan tidak ada border yang akan ditampilkan, karena nilai default untuk properti border-style nya none (tidak ada).

Pada contoh di bawah ini, tidak akan ada border-nya:

p {
    border: 5px #00ff00;
}