Home » CSS » Border Style, Border Width, Border Color

Border Style, Border Width, Border Color

30 Mar. 201131 comments
Border Style, Border Width, Border Color

Kalau di postingan sebelumnya sengaja saya bahas yang ringan dan enteng yakni tentang cara mengganti background theme wordPress, tutorial kali ini juga masih membahas yang ringan, enteng, renyah dan gurih heee .. (krupuk kali … ) yakni tentang css border. Pembahasannya kita fokuskan kepada border style, border width dan border color.

Border Style :

Di CSS border properties bentuk-bentuk border ada beberapa macam di antaranya, dotted, dashed, solid, double, groove, ridge, inset dan outset.

Contoh :

Contoh tanpa border/No border, penulisan kodenya : border-style:none

Contoh dotted border, penulisan kodenya : border-style:dotted

Contoh dashed border, penulisan kodenya : border-style:dashed

Contoh solid border, penulisan kodenya : border-style:solid

Contoh double border, penulisan kodenya : border-style:double

Contoh groove border, penulisan kodenya : border-style:groove

Contoh ridge border, penulisan kodenya : border-style:ridge

Contoh inset border, penulisan kodenya : border-style:inset

Contoh outset border, penulisan kodenya : border-style:outset

Border Width :

Dengan suatu border properties, border bisa diatur lebar/ketebalannya. Untuk pengaturan ketebalan suatu border bisa menggunakan pixels (px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu, thin, medium, atau thick (tipis, sedang, atau tebal).

Contoh sebuah border dengan style : solid width : 5px

penulisan kodenya : border-style:solid;border-width:5px;

Contoh sebuah border dengan style : ridge width : thick

penulisan kodenya : border-style:solid;border-width:thick;

Border Color :

Dengan suatu border properties, border bisa diatur warnanya. Untuk pengaturan warna suatu border bisa menggunakan nama suatu warna (dalam bahasa Inggris tentunya) misalnya, blue, red, yellow, grey dll, atau bisa menggunakan RGB misalnya, rgb(0.51.26), atau HEX misalnya, #330000

Contoh border style:double width:3px color:#330000

penulisan kodenya : border-style:double;border-width:3px;border-color:#330000;

Penulisan kode border properties di atas bisa diringkas (shorthand) menjadi : border:double 3px #330000;

Contoh lain penggunaan border style yang berbeda untuk bagian atas (top), kanan (right), bawah (bottom) dan kiri (left) :

penulisan kodenya : border-style:dotted solid dashed double;border-width:1px 2px 3px 4px;border-color:#330000 blue red green;

Keterangan :
border-style:dotted solid dashed double, urutanya dari atas kanan bawah kiri. Atas=dotted kanan=solid bawah=dashed kiri=double. Demikian juga untuk width dan color urutannya dari atas kanan bawah kiri. Kemudian jika ditulis seperti ini : border-style:dotted solid dashed artinya bagian atas=dotted, kanan dan kiri=solid, bawah/bottom=dashed. Jika ditulis seperti ini : border-style:dotted dashed artinya bagian atas dan bawah=dotted, bagian kiri dan kanan=dashed.

Border juga bisa diset hanya pada bagian tertentu saja (individual border) misalnya hanya akan memberi border pada bagian bawah, maka penulisan kodenya menjadi : border-bottom, bagian atas saja (border-top), bagian kiri saja (border-left) atau kanan saja (border-right). Contoh pemberian boder hanya pada bagian bawah saja (border-bottom) dengan border style : dashed :

penulisan kodenya (langsung disingkat/shorthand) : border-bottom:dashed 3px #00331A;

Pada bagian tertentu, border juga bisa dibuat menjadi transparan/hidden/tersembunyi. Misalnya pada bagian atas (border-top) dibuat menjadi transparan.

penulisan kodenya (langsung disingkat/shorthand) : border:solid 3px #00331A;border-top:none; atau bisa juga seperti ini : border:solid 0 3px 3px 3px #00331A;

Selain dengan none untuk menghilangkan tampilan border juga bisa menggunakan transparent atau hidden.

Oke itu pengenalan dasar-dasar tentang border, baik border style, border width maupun border color. Dengan kreatifitas serta pengembangan lebih lanjut dan dipadukan dengan kelebihan-kelebihan yang ada di CSS3 nantinya anda akan bisa menghasilkan berbagai macam tampilan border yang menarik.

Mudah-mudahan artikel tentang Border Style, Border Width, Border Color ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  2. Tips dan Tricks CSS (Cascading Style Sheets)
  3. CSS3 Animation, Zoom In Zoom Out, Rotation
  4. Yesterday, The Beatles
  5. Modifikasi Tampilan Halaman Daftar Isi
  6. Cara Mengganti Background Theme WordPress
  7. Cara Mengganti Font Dalam Postingan
  8. Mempercantik Tampilan Code Snippets Dengan CSS
  9. Custom CSS Per Post
  10. Membuat Efek Text Stroke Dengan CSS
  1. 1-4-2011 at 09:21 | #1

    Nice tutorial. Pak, saya pengen banget mempercepat akses blog. Punya sampeyan kok cepetnya minta ampun ya?!
    Heran … Saya pernah coba banyak tips, tapi mungkin memang dasarnya temanya agak berat. Jadinya lambat.
    salam hangat dari Sulawesi. :-)

    Reply

    Alwi Reply:

    Sebagian besar sudah saya share caranya silahkan ditelusuri terutama di kategori optimasi wordpress dan css

    Reply

    Abied Reply:

    Iya Pak. Beberapa sudah saya baca.
    Sayangnya kemarin bermasalah dengan hosting, sering down.
    Maklum, kunjungan hingga 30ribuan. Hufh. Awalnya seneng”, tapi tiap kali down, ribet banget.
    Selalu 403 forbidden. Malah kemarin sempat temanya di anggap rusak. Akhirnya gak bisa dipake. Dan mesti atur ulang semua.
    Saya sering baca tutorial di sini.
    Bagus …

    Reply

    Nurul Imam Reply:

    kok bisa cepet kayak gitu yah ?
    klo buat blogger gimana ?

    Reply

  2. 1-4-2011 at 11:41 | #2

    wah kayaknya bulan ini gagal lagi nih jadi top koment .. he..he..

    Reply

  3. 1-4-2011 at 15:04 | #3

    Saya paling pusing sama border mas, kalo di pasang border biasa aja dia nurut, tapi kalau di tambahin box shadow (css3) kok tidak beraturan ya? pada image untuk thumbnail (feature post) tidak berefek, tapi untuk image biasa muncul efeknya. Salah di mana ya? padahal style untuk image cuma satu yakni di .entry img {}
    Ada saran mas? :D

    Reply

    Alwi Reply:

    untuk thumbnailnya mungkin bisa dicoba css class-nya di ini : woo-image thumb alignleft

    Reply

  4. 1-4-2011 at 16:40 | #4

    maksudnya apa ni mas????

    Reply

    hybrid car Reply:

    Tentang Border Style, Border Width dan Border Color sob…….

    Reply

  5. 5-4-2011 at 08:26 | #5

    ijin bukmak ya mas…

    Reply

  6. 10-4-2011 at 18:01 | #6

    triknya hebat nih, membuat yang biasa jadi luar biasa

    Reply

    Bang Iwan Reply:

    patut untuk dicoba,… tapi saya masih perlu belajar dulu.

    Reply

  7. 26-10-2011 at 10:20 | #7

    nanti saya pake kode CSS itu bila perlu…hehee….sasya masih suka yang solid2 za

    Reply

  8. 30-10-2012 at 09:46 | #8

    boleh dicoba nih, code htmlnya. thanx

    Reply

  9. 7-4-2014 at 12:26 | #9

    keren nih, belajar html dan css

    Reply

  10. 16-4-2014 at 18:51 | #10

    makasih telah berbagi infonya sangat bagus

    Reply

Comment pages
1 22290
4+9=? (Wajib diisi)