Tutorial Style Border dan Jenis Garis

Friday, June 1, 2012

Tutorial Style Border dan Jenis Garis

7:39:00 AM | Diposkan oleh Unknown | | Edit Post

Blog Tutorial - Tutorial kali ini adalah berhubungan dengan border. Border bisa juga dikatakan sebagai bingkai. Ada berbagai macam bentuk border yaitu dapat berupa bingkai kotak penuh , bingkai berupa garis atas, bawah, kanan atau kiri dari sesuatu di dalam blog. Sesuatu yang dapat diberikan efek bingkai misalnya posting area, head, widget dan lain sebagainya. Nah, berikut ini ada beberapa contoh jenis border yang dapat anda pakai untuk mempercantik tampilan blog atau website anda.

Jenis-jenis border adalah

border (bingkai kotak penuh)
border-top (bingkai di bagian atas)
border-bottom (bingkai di bagian bawah)
border-right (bingkai di bagian kanan)
border-left (bingkai di bagian kiri)

Jenis garis pada border :

ridge >> contoh kode >> border:15px ridge silver
groove >> contoh kode >> border:15px groove silver
outset >> contoh kode >> border:15px outset silver
inset >> contoh kode >> border:15px inset silver
solid >> contoh kode >> border:15px solid silver
double >> contoh kode >> border:15px double silver
dotted >> contoh kode >> border:15px dotted silver
dashed >> contoh kode >> border:15px dashed silver

Petunjuk kode :

Kode berwarna merah adalah tebal border

Kode warna hijau adalah kode warna sesuai dengan yang anda inginkan

Contoh pemakaian pada jenis border : border

1. Jenis garis: ridge

contoh border ridge, kode html-nya adalah
border:15px ridge tomato

2. Jenis garis: groove

contoh border groove, kode html-nya adalah
border:15px groove tomato

3. Jenis garis: outset

contoh border outset, kode html-nya adalah
border:15px outset tomato

4. Jenis garis: inset

contoh border type inset, kode html-nya adalah
border:15px inset tomato

5. Jenis garis: solid

contoh border solid, kode html-nya adalah
border:15px solid tomato

6. Jenis garis: double

contoh border double, kode html-nya adalah
border:15px double tomato

7. Jenis garis: dotted

contoh border dotted, kode html-nya adalah
border:15px dotted tomato

8. Jenis garis: dashed

contoh border dashed, kode html-nya adalah
border:15px dashed tomato

9. Jenis garis : campuran/ mixed
Anda juga dapat membuat border dengan jenis garis campuran seperti berikut ini :
urutan style border adalah: atas, kanan, bawah, kiri
contoh untuk border-style: dotted solid double dashed

contoh border dashed, kode html-nya adalah
border-color: tomato; border-style: dotted solid double dashed; border-width:15px

Nah, sobat...
Mudah-mudahan jenis border di atas dapat menambah wawasan sobat semua. Anda dapat menerapkannya pada berbagai tempat, bisa untuk style pada posting blog, maupun untuk mengatur tampilan blog misalkan pada kolom posting, judul blog, dll.

Oke Selamat mencoba.

Admin-Blog Tutorial

Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International