CSS BORDERS
Assalamu'alaikum Wr. Wb
Hai sobat semua, terima kasih telah mengunjungi blog saya ini. Pada kesempatan kali ini kita akan belajar mengenai Border pada CSS.
Langsung saja yukk...
Properti CSS Border memungkinkan kita untuk menentukan gaya, lebar, dan warna elemen border.
Properti border-style menentukan jenis border apa yang akan ditampilkan.
Berikut nilai - nilai yang diizinkan :
- dotted - Mendefinisikan border titik
- dashed - Mendefinisikan border putus - putus
- solid - Mendefinsikan sebuah border yang solid
- double - Mendefinisikan border ganda
- groove - Mendefinisikan sebuah border berlekuk 3D, efeknya tergantung pada nilai border-color
- inset - Mendefinisikan sebuah border inset 3D, efeknya tergantung pada nilai border-color
- ridge - Mendefinisikan sebuah border bergerigi 3D, efeknya tergantung pada nilai border-color
- outset - Mendefinisikan sebuah border awal 3D, efeknya tergantung pada nilai border-color
- none - Mendefinisikan tidak ada border
- hidden - Mendefinisikan border yang tersembunyi
Properti border-style dapat memiliki dari satu sampai empat nilai (untuk border atas, batas kanan, batas bawah, dan border kiri).
Contoh :
Hasilnya :
LEBAR BORDER
Properti border-width menentukan lebar empat border.
Lebar dapat diatur dengan ukuran tertentu (dalam px, cm, em, dll) atau menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium , atau thick.
Properti border-width dapat memiliki dari satu sampai empat nilai (untuk border atas, batas kanan, batas bawah, border kiri).
Contoh :
Hasilnya :
WARNA BORDER
Properti border-color digunakan untuk mengatur warna dari empat border.
Warna dapat diatur oleh :
- nama - menentukan nama warna, seperti "merah"
- hex - menentukan nilai hex, seperti "#ff0000"
- RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
Properti border-color dapat memiliki dari satu sampai empat nilai (untuk border atas, border kanan, border bawah, border kiri).
Jika border-color tidak diatur, itu akan mewarisi warna dari elemen.
Contoh :
Hasilnya :
BORDER INDIVIDUAL SIDES
Contoh diatas kita lihat bahwa kita bisa menentukan border yang berbeda untuk setiap sisi.
Contoh :
Hasilnya :
Atau juga bisa seperti ini, lebih ringkas dalam penulisan sintaknya :
Hasilnya :
BORDER KIRI
Contoh :
Hasilnya :
BORDER BAWAH
Contoh :
Hasilnya :
BORDER BULAT
Contoh :
Hasilnya :
Silakan dicoba sendiri ya sobat. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.
Referensi :
http://www.w3schools.com/css/css_border.asp
Wassalamu'alaikum Wr. Wb