Border CSS

Salah satu modifikasi CSS yang paling berguna untuk mempercantik tampilan sebuah content adalah border. Dengan memodifikasi border maka kita bisa menampilkan sebuah element dengan lebih menarik yaitu dengan memberikan tampilan garis di sekelilingnya element.

Border style

Ada berbagai macam jenis border style yang bisa kamu gunakan. Saya menganjurkan kamu untuk berlatih menggunakan semuanya dan mengkombinasikannya dengan berbagai macam warna untuk mendapatkan tampilan border yang kamu inginkan.

Code CSS border:

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

Hasil code CSS border:

Paragraph ini menggunakan solid border

Paragraph ini menggunakan double border

Paragraph ini menggunakan grooved border

Paragraph ini menggunakan dotted border

Paragraph ini menggunakan dashed border

Paragraph ini menggunakan inset border

Paragraph ini menggunakan outset border

Paragraph ini menggunakan ridge border

Paragraph ini menggunakan hidden border

Secara default, border yang kita gunakan adalah hidden.

Border width

Untuk merubah ketebalan dari border yang kamu gunakan kamu bisa menggunakan border-width property. value dari border-width bisa kamu nyatakan dalam pixel dan keyword. Keyword yang bisa kamu gunakan yaitu: thin, medium, thick.

Code CSS border width:

h4 { border-width: 7px; border-style: outset; }
h5 { border-width: medium; border-style: outset; }
p { border-width: thick; border-style: solid; }

Hasil code CSS border width:

Header h4 ini memakai property width 7px

Header h5 ini memakai property width “medium”

Paragraph ini memakai property width “thick”

Border color

Untuk memberi warna pada border yang kamu gunakan maka kamu bisa menggunakan border-color property. Untuk jenis warnanya kamu bisa menggunakan RGB, hexadecimal, atau keyword.

Code CSS border color:

h4 { border-color: rgb( 100, 100, 255); border-style: dashed; }
h5 { border-color: #FFBD32; border-style: ridge; }
p { border-color: blue; border-style: solid; }

Hasil code CSS border color:

Header h4 ini menggunakan property border color dengan value RGB (100, 100, 225)

Header h5 ini menggunakan property border color dengan value hexadecimal #FFBD32

Paragraph ini menggunakan property border color dengan value keyword “blue”

Border-direction

Kalau kamu ingin menempatkan satu sisi border saja untuk sebuah element HTML atau kamu ingin membuat tampilan border yang berbeda untuk setiap sisinya maka kamu bisa menambahkan property border-direction. Dengan code border-direction maka kamu bisa menampilkan warna yang berbeda-beda untuk setiap sisi border maupun style yang berbeda.

Property Value
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • size
  • keyword
  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
  •  color
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
  • solid
  • double
  • groove
  • dotted
  • dashed
  • inset
  • outset
  • ridge
  • hidden
  • four-sides
  • keyword

Code CSS border-direction:

h4 { border-bottom-style: dashed ;
border-bottom-color: yellow;
border-bottom-width: 5px; }

h5 { border-top-style: double;
border-top-color: purple;
border-top-width: thick; }

p { border-left-style: groove;
border-left-color: green;
border-left-width: 15px;
border-bottom-style: ridge;
border-bottom-color: yellow;
border-bottom-width: 25px; }

Hasil code CSS border-direction:

Header h4 ini hanya memiliki satu border dibawahnya.

Header h5 ini hanya memiliki satu border di atasnya.

Paragraph ini memiliki border di sebelah kiri dan bawahnya.

Border all in one

Berbagai macam property border diatas seperti color, width, dan style bisa kamu singkat menjadi hanya satu baris saja. Lihat contoh code dibawah.

Property Value
  • border
  • border-top
  • border-right
  • border-bottom
  • border-left
  • size
  • color
  • solid
  • double
  • groove
  • dotted
  • dashed
  • inset
  • outset
  • ridge
  • hidden
  • four-sides
  • keyword

Code CSS border gabungan:

h4 { border: 20px outset blue ;}
h5{ border: 5px solid; }
p { border: dotted; }

Hasil code CSS border gabungan:

Header h4 ini menggunakan code border warna biru dengan style outset dan width 20px yang ditulis dalam satu baris

Kita tidak menggunakan code border color untuk header h5 ini sehingga warna default yang dipakai.

Paragraph ini hanya menggunakan satu code border style.

Border collapse

Pada sebuah table HTML sederhana biasanya kita melihat ada jarak antara setiap cell dan selain itu pada setiap cell tersebut dikelilingi oleh border sehingga terdapat dua border untuk setiap cell yang bertemu. Lihat contoh table sederhana dibawah.

Table sederhana yang diberi border:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Fungsi border collapse CSS ini adalah menghilangkan jarak antara cell pada  sebuah table dan membuat hanya ada satu border pada kedua cell yang bertemu.

Code CSS table dengan collapse border:

table,th,td
{
border:1px solid black;
border-collapse:collapse
}

Hasil code CSS table dengan collapse border:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Border spacing

Untuk memodifikasi jarak antara cell pada table kamu bisa menggunakan border spacing property.

Code CSS border spacing:

table, th, td
{
border:1px solid black;
}

table
{
border-spacing:15px;
}

Hasil code border spacing:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

One Response to “Border CSS”

  1. wah border banyak bangetz saya suku yg inset keren pas warna terang dan gelap kalau di padukan dengan benar

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>