JENIS-JENIS MODIFIKASI BORDER PADA CSS UNTUK BLOG

Posted by on 19 January 2015 - 4:06 PM

Ketika anda memodifikasi template untuk memperindah tampilan blog, maka salah satu bagian yang sebaiknya anda perhatikan adalah modifikasi border. Border atau garis pinggir merupakan bagian dari desain yang memegang peranan penting dalam mempercantik blog anda. Jenis border yang paling umum digunakan adalah jenis border solid yaitu berupa garis utuh dengan warna tertentu. Untuk memodifikasi tampilan blog sedemikian rupa, ada baiknya anda mencoba untuk menggunakan jenis-jenis border yang lain seperti garis putus-putus, garis ganda, dan lain sebagainya. Anda mungkin pernah menemui sebuah situs atau blog yang tidak terlalu menonjolkan border dan cenderung bermain dalam modifikasi warna.

Gaya Border (Border Style)

Properti border dalam CSS memungkinkan kita untuk mengatur dan menyesuaikan model border yang akan ditampilkan. Untuk mengatur gaya border digunakan properti border-style. Nilai atau value dari border-style tersebut menentukan 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 beberapa value dan fungsinya.

None : border tidak 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 efek menjorok ke dalam.

Outset : menampilkan border dengan efek timbul.


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


Ketika anda mengedit artikel dalam mode HTML, anda juga dapat memanfaatkan properti border untuk membuat border pada konten anda misalnya membuat kotak untuk rumus, membuat border untuk menampilkan sebuah kalimat kutipan, atau ketika anda membuat tabel dengan HTML. Berikut beberapa contoh 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, semoga bermanfaat.

Edutafsi.com adalah blog tentang bahan belajar. Gunakan menu atau penelusuran untuk menemukan bahan belajar yang ingin dipelajari.