fitur border pada css3

Property Border
Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan. Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style. Berikut ini propertynya :
1.    border
Property ini untuk mengatur border secara keseluruhan

Selektor{border:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

2.    border-width
Property ini untuk mengatur lebar border secara keseluruhan

Selektor{ border-width:thin}

Value lain : thick, medium

3.    border-top-width
Property ini untuk mengatur lebar border top

Selektor{ border-top-width:thin}

Value lain : thick, medium

4.    border-right-width
Property ini untuk mengatur lebar border right

Selektor{ border-right-width:thin}

Value lain : thick, medium

5.    border-bottom-width
Property ini untuk mengatur lebar border bottom

Selektor{ border-bottom-width:thin}

Value lain : thick, medium

6.    border-left-width
Property ini untuk mengatur lebar border left

Selektor{ border-left-width:normal}

Value lain : thick, medium

7.    border-color
Property ini untuk mengatur warna dari border

Selektor{ border-color:#333333}

Value lain : anda bisa gunakan warna hexadecimal yang awalnya dimulai dengan tanda #

8.    border-style
Property ini untuk mengatur style dari border

Selektor{ border-style:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

9.    border-top
Property ini untuk mengatur border top

Selektor{ border-top:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

10.    border-right
Property ini untuk mengatur border right

Selektor{ border-right:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

11.    border-bottom
Property ini untuk mengatur border bottom

Selektor{ border-bottom:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

12.    border-left
Property ini untuk mengatur border left

Selektor{ border-left:normal}

Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

Pada css3 terdapat fitur tambahan yaitu

13.    border-image

Property ini berfungsi untuk mengganti pola (pattern) yang secara default digunakan pada border diganti dengan gambar.

Kode untuk membuat border image

div.contoh {

    height:40px;

    width:400px;

    

    /* Property untuk membuat border dengan gambar: */

    

    -moz-border-image:url(border.gif) 30 30 round; /* Firefox */

    -webkit-border-image:url(border.gif) 30 30 round; /* Safari and Chrome */

    border-image:url(border.gif) 30 30 round;

}

14.    border-radius

Property ini berfungsi  Untuk menghasilkan efek glossy

Contoh kode untuk membuat border –radius

    div.contoh {

    background:#0CF;

    height:40px;

    width:400px;

    border:2px solid #F90;

 

    /* Property untuk membuat sudut lengkung : */

    

    -moz-border-radius:25px; /* Firefox */

    border-radius:25px;

}

15.    box-shadow

Property ini berfungsi  Untuk membuat efek bayangan

Contoh kode untuk membuat box-shadow

    div.contoh {

    background:#0CF;

    height:40px;

    width:400px;

    border:2px solid #F90;

    

    /* Property untuk membuat sudut lengkung : */

    

    -moz-border-radius:25px; /* Firefox */

    border-radius:25px;

 

    /* Property untuk bayangan : */

    -moz-box-shadow: 4px 4px 10px #999; /* Firefox */

    -webkit-box-shadow: 4px 4px 10px #999; /* Safari and Chrome */

    box-shadow: 4px 4px 10px #999; }

 

http://etsyteamnfcr.blogspot.com/2013/03/pengenalan-kode-properti-css.html#chitika_close_button
http://www.w3function.com/blog/?p=det&idn=59