Jenis-Jenis Modifikasi Border Pada Css Untuk Blog

Posted on
Ketika anda memodifikasi template untuk memperindah tampilan blog, maka salah satu bab yang sebaiknya anda perhatikan merupakan modifikasi border. Border atau garis pinggir merupakan bab dari desain yang memegang peranan penting dalam mempercantik blog anda. Jenis border yang paling umum dipakai merupakan jenis border solid ialah berupa garis utuh dengan warna tertentu. Untuk memodifikasi tampilan blog sedemikian rupa, ada baiknya anda mencoba untuk memakai jenis-jenis border yang lain ibarat garis putus-putus, garis ganda, dan lain sebagainya. Anda cukup pernah menemui sebuah situs atau blog yang tak terlalu menonjolkan border dan cenderung bermain dalam modifikasi warna.

Gaya Border (Border Style)

Properti border dalam CSS mecukupkan kita untuk mengatur dan menyesuaikan model border yang akan ditampilkan. Untuk mengatur gaya border dipakai properti border-style. Nilai atau value dari border-style tersebut memilih gaya border yang akan ditampilkan.

Gaya border biasanya dihubungkan dengan ukuran dan warna border dengan properti border-width untuk tebal border dan border-color untuk warna border. berikut sedikit value dan fungsinya.

None : border tak ditampilkan.

Solid : menampilkan border dalam bentuk garis utuh atau padat.

Dotted : menampilkan border berupa titik-titik.

Dashed : menampilkan border dalam bentuk garis putus-putus.

Double : menampilkan dua border sekaligus.

Groove : menampilkan border 3D berlekuk.

Ridge : menampilkan border 3D lengkung rabung.

Inset : menampilkan border dengan pengaruh menjorok ke dalam.

Outset : menampilkan border dengan pengaruh timbul.

Contoh penggunaan :
box {
   border-style : solid;
   border-color : #000;
   border-width : 5 px;
}

Ketika anda mengedit artikel dalam mode HTML, anda juga sanggup memanfaatkan properti border untuk membuat border pada konten anda contohnya membuat kotak untuk rumus, membuat border untuk menampilkan sebuah kalimat kutipan, atau dikala anda membuat tabel dengan HTML. Berikut sedikit pola penggunaannya :

<div style=”background: #f5f5f5; border: 4px solid #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 4px dotted #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 4px dashed #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 5px double #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 6px groove #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 6px ridge #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 6px inset #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

<div style=”background: #f5f5f5; border: 6px outset #40E0D0; height: 60px; padding: 10px; width: 400px;”></div>

Demikianlah modifikasi border untuk memperindah tampilan blog, agar bermanfaat.