Border CSS

Border CSS

Property border digunakan untuk mengubah gaya, lebar, dan warna border dari suatu element.

Border Style

Ada berbagai macam border. bisa dirubah dengan property border-style .
Berikut beberapa value dari border-style :

dotted - Defines a dotted border

dashed - Defines a dashed border

solid - Defines a solid border

double - Defines a double border

groove - Defines a 3D grooved border. The effect depends on the border-color value

ridge - Defines a 3D ridged border. The effect depends on the border-color value

inset - Defines a 3D inset border. The effect depends on the border-color value

outset - Defines a 3D outset border. The effect depends on the border-color value

none - Defines no border

hidden - Defines a hidden border


property border-style bisa memuat 4 border value (Atas, Kanan, Bawah, Kiri).
Contoh :


Atas : dotted, Kanan : dashed, bawah : solid, kiri double  

Border Wide

Jika ingin mengatur ketebalan border gunaka property border-width.
ketebalanya bisa diatur dalam  bermacam size (px, pt, cm, em, etc). Atau menggunakan 3 value yang telah ditentukan : thin, medium, or thick.
property border-width bisa memuat 4 border value (Atas, Kanan, Bawah, Kiri).

Border Color

untuk memberi warna pada border gunakan property border-color.
bisa di set dengan :

• name - specify a color name, like "red"
• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent

 property border-color bisa memuat 4 border value (Atas, Kanan, Bawah, Kiri).

Border - Satuan Sisi

Ada juga property untuk menentukan border di masing masing sisinya(Atas, Kanan, Bawah, Kiri).
Contoh :

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

Border - Shorthand Property

 Shorthand yaitu tekhnik untuk memperpendek script.
Menggunakan property border dan harus berurutan :

• border-width
• border-style (Wajib ada)
• border-color

 Contoh :

p{
border: 5px solid red;
}