CSS Border

Ada juga artikel Nano yang memuat tentang border atau garis, tetapi artikel ini mudah-mudahan lebih simple dan lengkap.



border-style

Properti border-style mendefinisikan gaya dari garis.


Contoh :

p{
border-style:solid;
}

none

dotted

dashed

solid

double

groove

ridge

inset

outset


Anda juga bisa menggunakan 4 nilai border dalam satu konten.

Contoh :

p{
border-style:solid dotted dashed double;
}

4 nilai

Urutannya :

p{
border-style:atas kanan bawah kiri;
}

Atau 3 nilai.

Contoh :

p{
border-style:dashed double solid;
}

3 nilai

Urutannya :

p{
border-style:atas kanan+kiri bawah;
}

Atau 2 nilai.

Contoh :

p{
border-style:dashed double;
}

2 nilai

Urutannya :

p{
border-style:atas+bawah kanan+kiri;
}

Dihafalkan rumusnya !!!. Penggabungan 4, 3, 2 nilai akan sama rumusnya, walau berbeda properti.



border-width

Properti border-width digunakan untuk lebar garis. Harus menggunakan properti border-style supaya bisa berfungsi. Anda bisa menggunakan dengan ukuran pixel atau nilai : thin, medium, atau thick.


Contoh :

h1{
border-style:solid;
border-width:5px;
}
h2{
border-style:dotted;
border-width:medium;
}

Properti ini bisa menggunakan 4 nilai.



border-color

Properti border-color digunakan untuk warna garis. Harus menggunakan properti border-style supaya bisa berfungsi. Bisa menggunakan nama warna, RGB, dan HEX.


Contoh :

h1{
border-style:solid;
border-color:#black;
}
h2{
border-style:double;
border-color:#ffff00;
}

Properti ini bisa menggunakan 4 nilai.



Border Satu Sisi

Anda juga bisa menggunakan Properti satu sisi saja. Walaupun jarang yang menulis seperti ini, memakan banyak waktu, tempat, dll.


Contoh :

h1{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Bisa digunakan pada : border-style, border-width, border-color, tetapi ditengahnya ditambahkan dengan : top, right, bottom, dan left, seperti contoh diatas.



Properti Lebih Singkat

Properti ini yang lebih sering digunakan, karena lebih singkat dan mudah.


Contoh :

h1{
border:3px solid #222;
}

Properti ini juga bisa digunakan satu sisi dengan penambahan properti : top, right, bottom, dan left.

Contoh :

h1{
border-bottom:3px solid #222;
}



Alhamdulillah

7 comments:


  1. Keren, terima kasih atas infonya... saya jadi rada ngerti nih tentang css. Newbie

  2. sama-sama bro...
    saya juga masih Newbie bro... :D

  3. mantap gan....

  4. terima kasih sudah berkunjung...

  5. dapat ni yang dicari
    makasih gan info nya

  6. sama-sama bro...

  7. Waw seep mas ...

Posting Komentar


Creative Commons License
CSS Border by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-border.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.