Belajar Mengatur Border dengan CSS bag 2

By Adhi P. - Last updated: Wednesday, August 8, 2012 - Save & Share - Comments

banner438kursus Belajar Mengatur Border dengan CSS bag 2

Didalam CSS, memungkinkan untuk menentukan border yang berbeda untuk sisi yang berbeda, seperti pada contoh dibawah ini :


p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

 

Contoh diatas juga bisa diatur dengan single property :

 


border-style:dotted solid;

 

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;

 

Seperti yang bisa dilihat dari contoh diatas, akan ada banyak property untuk mengatur border. Untuk mempersingkat kode kita bisa menggunakan shortand property yaitu “border”

 

border:5px solid red;

 

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;

 

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

Oke itu pengenalan dasar-dasar tentang border. Materi belajar css selanjutnya adalah Outline.

 

Posted in Belajar CSS • Tags: Top Of Page