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

Membuat NavBar dropdown menu dengan CSS Navigasi blog yang akan kita buat berikut adalah navigasi horizontal menu dropdown dengan hanya menggunakan CSS. Karena hanya dengan menggunakan CSS,c...
ID dan CLASS dalam CSS ID dan CLASS dalam pemrograman CSS Adalah selector yang dibuat oleh seorang webmaster dalam memanipulasi pada satu elemen pada halaman HTML / web. ID ...
Bagaimana cara membuat CSS scrollbar Scroolbar adalah bagian elemen yang bisa digeser naik atau turun dengan menggunakan mouse. Apakah gunanya scroolbar?.... Scroolbar biasanya dipakai ji...
Apa itu CSS CSS adalah kependekan dari Cascading Style Sheet ,pengertiannya adalah sekumpulan code pemrograman web yang berfungsi untuk mengendalikan beberapa kom...
Cara mengedit template blogspot Desain dari sebuah situs bisa menjadi sebuah identitas tersendiri yang unik.Karena itu untuk mendesain desain template yang berbeda dari semua situs y...
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...

2 thoughts on “CSS border – membuat garis pembatas

Leave a Reply

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