Belajar Mengatur Border CSS 2

Kita lanjutin belajar mengatur border CSS ya.

Dengan belajar CSS, kita bisa menentukan border yang berbeda untuk sisi yang berbeda, seperti pada contoh kode dibawah ini :

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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 :

?

1	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) :

?

1	border-bottom:dashed 3px #00331A;

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

?

1	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) :

?

1	border:solid 3px #00331A;border-top:none;

atau bisa juga seperti ini :

?

1	border:solid 0 3px 3px 3px #00331A;

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