CSS border – membuat garis pembatas

Border adalah properti dari CSS untuk menciptakan garis tepi /garis pembatas pada suatu elemen blog.

Advertisement

Border termasuk properti CSS shorthan seperti margin dan padding.Shorthan adalah perintah yang ditulis lebih pendek/singkat.
Perintah panjang penulisan CSS border adalah seperti contoh;

.div{
border-right:1 px solid red;
border-left:1 px solid red;
border-bottom:1 px solid red;
border-top:1 px solid red;
}

Perintah CSS border Shorthan dipakai,jika border pada seluruh sisi elemen dibikin sama.Agar tidak terlalu panjang menuliskannya,Like this;

.div{
border:2 px solid red;
}

Contoh jika border hanya disebelah kanan saja;

.div{border-right: 1px solid blue}

Atau kiri saja;

.div{border-left: 1px solid blue}

Atau hanya kanan dan kiri saja;

.div{border-right: 1px solid blue;
border-left: 1px solid blue
}

Macam macam type border / value

1.Border style types

  • solid
  • double
  • groove
  • dotted
  • dashed
  • inset
  • outset
  • ridge

Ketebalan border

Umumnya dipakai dalam px (pixel)

Warna border

Berdasarkan tabel warna dalam HEX,RGB atau HURUF

Contoh penulisan perintah CSS untuk border secara keseluruhan;

CSS border Shorthan

#div{border: 1px solid red; }

CSS border Panjang

#div{border-top: 1px solid red;
border-bottom: 1px solid red;
}

Atau

#div{border: 1px dashed red; }

Dst…dst

Untuk lebih jelasnya,berikut contoh penulisan perintah CSS macam macam style dari   border;

.ex1{border:3px double red; padding: 10px }
.ex2{border:3px groove blue; padding: 10px }
.ex3{border:3px dotted yellow; padding: 10px }
.ex4{border:3px inset darkred; padding: 10px }
.ex5{border:3px dashed orange; padding: 10px}
.ex6{border:3px outset purple; padding: 10px }
.ex7{border:3px ridge black; padding: 10px }
.ex8{border:3px solid aqua; padding: 10px }

Catatan: Jika menggunakan Value double,outset,inset ,groove dan ridge minimal nilainya adalah 3px supaya kelihatan efeknya.

Dan ini Demo penampakannya;

.ex1{border:3px double red; padding: 10px }
.ex2{border:3px groove blue; padding: 10px }
.ex3{border:3px dotted yellow; padding: 10px }
.ex4{border:3px inset darkred; padding: 10px }
.ex5{border:3px dashed orange; padding: 10px}
.ex6{border:3px outset purple; padding: 10px }
.ex7{border:3px ridge black; padding: 10px }
.ex8{border:3px solid aqua; padding: 10px }

Ini adalah style double border

Ini adalah style groove border

Ini adalah style dotted border

This is a inset border

Ini adalah style dashed border

Ini adalah style outset border

Ini adalah style ridge border

Ini adalah style solid border

Segini saja tutorial dasar penggunaan CSS border,silahkan berimporvisasi sendiri.

Advertisement

Related Post

Cara mengatur tataletak elemen pada template blog Kalau kamu berniat untuk membuat desain blog sendiri,harus mengetahui dasar HTML dan Dasar CSS sehingga bisa mengatur atau menambah tata letak dari su...
Pengenalan properti CSS (background) Properti CSS adalah syntax yang diperlukan untuk memanipulasi selector yang kita inginkan.Untuk mengetahui apa itu selector,properti dan value baca du...
Penggunaan Pseudo class pada CSS Kenapa dinamakan pseudo?....... Maaf ya saya tidak tahu kenapa disebut dengan pseudo,mungkin beberapa contoh dan penggunaan pseudo pada CSS ini bisa d...
Cara mengganti Backgound blog dengan gambar Sebelum memasang Background gambar atau background IMG, sebaiknya kamu pikirkan terlebih dahulu.Karena penggunaan background gambar yang kurang tepat ...

2 thoughts on “CSS border – membuat garis pembatas

Leave a Reply

Your email address will not be published. Required fields are marked *