CSS : Border pada CSS

assalamualaikum wr. wb.
Postingan kali ini tentang Border pada CSS.

CSS Border Properti
CSS border properti digunakan untuk menentukan gaya, lebar, dan warna perbatasan elemen border.

Border Style
Properti border-style berfungsi untuk menentukan jenis perbatasan apa yang akan ditampilkan.
Nilai-nilai yang diizinkan seperti berikut ini :

• dotted - Mendefinisikan perbatasan bertitik
• dashed - Mendefinisikan perbatasan putus-putus
• solid - Mendefinisikan sebuah perbatasan yang solid
• double - Mendefinisikan perbatasan ganda
• groove - Mendefinisikan sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color
• ridge - Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color
• inset - Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada nilai border-color
• outset- Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color
• none - Mendefinisikan tidak ada batas
• hidden - Mendefinisikan perbatasan tersembunyi

Properti border-style dapat memiliki dari satu sampai empat nilai (untuk top border, right border, bottom border, dan left border).

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Hasilnya :

Lebar Border
Properti border-width menentukan lebar empat sisi perbatasan.
Lebar dapat diatur dengan ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium, atau thick.
Properti border-width dapat memiliki dari satu sampai empat nilai (untuk top border, right border, bottom border, dan left border).

p.width {
    border-style: solid;
    border-width: 5px;
}

Warna Border
Properti border-color digunakan untuk mengatur warna dari empat sisi perbatasan.
Warna dapat diatur oleh:

• nama - menentukan nama warna, seperti "blue"
• Hex - menentukan nilai hex, seperti "#ff0000"
• RGB - menentukan nilai RGB, seperti "rgb (255,0,0)"
• transparan

Properti border-color dapat memiliki dari satu sampai empat nilai (untuk top border, right border, bottom border, dan left border).
Jika border-color tidak diatur, akan mewarisi warna dari elemen.

p.color {
    border-style: solid;
    border-color: red;
}

Border - Individual Sides
Dari contoh di atas terlihat bahwa setiap sisi dapat ditentukan perbatasan yang berbeda.
Dalam CSS, ada juga properti untuk menentukan masing-masing perbatasan (top, right, bottom, dan left) :

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

Border Bulat
Properti border-radius digunakan untuk menambah batas bulat untuk suatu elemen.

p {
    border: 2px solid red;
    border-radius: 5px;
}

Sekian postingan saya kali ini, semoga dapat bermanfaat, terimakasih.
wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/css/css_border.asp