Ketika anda memodifikasi template untuk memperindah penampilan blog , maka salah satu bab yang semestinya anda amati merupakan adaptasi border. Border atau garis pinggir merupakan bab dari desain yang memegang peranan penting dalam mempercantik blog anda. Jenis border yang paling biasa digunakan merupakan jenis border solid yakni berupa garis utuh dengan warna tertentu. Untuk memodifikasi penampilan blog sedemikian rupa , ada baiknya anda menjajal untuk menggunakan jenis-jenis border lainnya seumpama garis putus-putus , garis ganda , dan lain sebagainya. Anda mungkin pernah menemui suatu situs atau blog yang tidak terlampau menonjolkan border dan condong bermain dalam adaptasi warna.
Gaya Border (Border Style)
Properti border dalam CSS memungkinkan kita untuk mengendalikan dan menyesuaikan versi border yang hendak ditampilkan. Untuk mengendalikan gaya border digunakan properti border-style. Nilai atau value dari border-style tersebut menyeleksi gaya border yang hendak ditampilkan.
Gaya border umumnya dihubungkan dengan ukuran dan warna border dengan properti border-width untuk tebal border dan border-color untuk warna border. berikut beberapa value dan fungsinya.
None : border tidak ditampilkan.
Solid : memperlihatkan border dalam bentuk garis utuh atau padat.
Dotted : memperlihatkan border berupa titik-titik.
Dashed : memperlihatkan border dalam bentuk garis putus-putus.
Double : memperlihatkan dua border sekaligus.
Groove : memperlihatkan border 3D berlekuk.
Ridge : memperlihatkan border 3D lengkung rabung.
Inset : memperlihatkan border dengan pengaruh menjorok ke dalam.
Outset : memperlihatkan border dengan pengaruh timbul.
Contoh penggunaan :
box {
border-style : solid;
border-color : #000;
border-width : 5 px;
}
Ketika anda mengedit postingan dalam mode HTML , anda juga sanggup mempergunakan properti border untuk menghasilkan border pada konten anda umpamanya menghasilkan kotak untuk rumus , menghasilkan border untuk memperlihatkan suatu kalimat kutipan , atau saat anda menghasilkan tabel dengan HTML. Berikut beberapa pola penggunaannya :
<div style="background: #f5f5f5; border: 4px solid #40E0D0; height: 60px; padding: 10px; width: 400px;”>
<div style="background: #f5f5f5; border: 4px dotted #40E0D0; height: 60px; padding: 10px; width: 400px;”>
<div style="background: #f5f5f5; border: 4px dashed #40E0D0; height: 60px; padding: 10px; width: 400px;”>
