Border style css apa saja?

Border pada CSS digunakan untuk memberikan garis pada elemen HTML. Border sangat berguna untuk member

Diperbaharui: 25 January 2021

Kegunaan border

Border pada CSS digunakan untuk memberikan garis pada elemen HTML. Anda bisa memilih macam-macam style garis dengan properti border-style, bisa juga mengatur ketebalan dengan properti border-width dan memberikan warna pada border itu sendiri dengan properti border-color. Border sering digunakan pada design web untuk memberikan perbatasan pada layout.

Border-style

Dengan properti border-style Anda bisa menggunakannya untuk menentukan style atau gaya manakah yang akan Anda gunakan untuk memberikan efek visual garis atau pun perbatasan. Berikut list border-style yang bisa Anda gunakan:

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  1 – Memberikan gaya border bertitik

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  2 – Memberikan gaya border putus-putus

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  3 – Memberikan gaya border yang solid atau bergaris

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  4 – Memberikan gaya border ganda

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  5– Memberikan gaya border alur 3D. Efeknya tergantung pada nilai border-color

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  6– Memberikan gaya border bergerigi 3D. Efeknya tergantung pada nilai border-color

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  7– Memberikan gaya border inset 3D. Efeknya tergantung pada nilai border-color

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  8– Memberikan gaya border awal 3D. Efeknya tergantung pada nilai border-color

• #p1 {
      border-style: solid;
      border-width: 2px;
      border-color: green;
  }
  #p2 {
      border-style: solid;
      border-width: 4px;
      border-color: blue;
  }
  #p3 {
      border-style: solid;
      border-width: 6px;
      border-color: red green blue orange;
  }

  9 – Tidak mendefinisikan border apapun

• p {
      border-top-width: 2px;
      border-right-width: 4px;
      border-bottom-width: 6px;
      border-left-width: 8px;
      border-top-style: dotted;
      border-right-style: dashed;
      border-bottom-style: solid;
      border-left-style: double;
      border-top-color: blue;
      border-right-color: green;
      border-bottom-color: red;
      border-left-color: black;
  }

  0 – Menentukan border yang tersembunyi

Berikut visual hasilnya:

Border dotted

Border dashed

Border solid

Border double

Border groove

Border ridge

Border inset

Border outset

Border none

Border hidden

Dengan properti border-style Anda dapat memiliki satu sampai empat nilai yaitu:

p {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 6px;
    border-left-width: 8px;
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: black;
}

Border-width

Dengan properti border-width Anda bisa menggunakannya untuk memberikan ukuran ketebalan atau lebar pada border, dan properti border width sendiri dapat memiliki satu sampai empat nilai yaitu:

p {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 6px;
    border-left-width: 8px;
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: black;
}

Width atau lebar dapat ditetapkan sebagai ukuran (px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium dan thick.

#p1 {
    border-style: solid;
    border-width: 7px;
}
#p2 {
    border-style: solid;
    border-width: medium;
}
#p3 {
    border-style: solid;
    border-width: 1px;
}

CopyLighting

Editor Online

Border-color

Dengan properti border-color Anda bisa menggunakannya untuk menentukan color atau warna manakah yang akan digunakan, jika Anda tidak memberikan warna atau color pada border, maka secara otomatis akan mewarisi color dari elemen induknya. Properti border color sendiri dapat memiliki satu sampai empat nilai yaitu:

p {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 6px;
    border-left-width: 8px;
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: black;
}

Border color dapat diatur oleh nilai:

• nama – tentukan nilai color nama, seperti red
• Hex – tentukan nilai color hex, seperti #ff0000
• RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
• transparan
• dll

#p1 {
    border-style: solid;
    border-width: 2px;
    border-color: green;
}
#p2 {
    border-style: solid;
    border-width: 4px;
    border-color: blue;
}
#p3 {
    border-style: solid;
    border-width: 6px;
    border-color: red green blue orange;
}

CopyLighting

Editor Online

Border individu

Anda bisa mengatur border lebih spesifik atau mendetail dengan menggunakan istilah border individu. Yang dimaksud dengan border individu sendiri, Anda bisa mengatur menentukan setiap sudut untuk memberikan border atau perbatasan. Berikut list properti border individu:

• border-top-# ( atas )
• border-right-# ( kanan )
• border-bottom-# ( bawah )
• border-left-# ( kiri )

Tanda pagar bisa Anda isi sesuai kebutuhan properti border ( width, style dan color )

p {
    border-top-width: 2px;
    border-right-width: 4px;
    border-bottom-width: 6px;
    border-left-width: 8px;
    border-top-style: dotted;
    border-right-style: dashed;
    border-bottom-style: solid;
    border-left-style: double;
    border-top-color: blue;
    border-right-color: green;
    border-bottom-color: red;
    border-left-color: black;
}

CopyLighting

Editor Online

Contoh di atas memberikan hasil yang sama seperti ini:

p {
    border-style: dotted solid;
    border-width: 2px 4px 6px 8px;
    border-color: blue green red black;
}

CopyLighting

Editor Online

Jadi, inilah cara kerjanya:

Jika properti border-style memiliki empat nilai:

• border-style: dotted solid double dashed;
  • border atas dotted
  • border kanan solid
  • border bawah double
  • border kiri dashed

Jika properti border-style memiliki tiga nilai:

• border-style: dotted solid double;
  • border atas dotted
  • border kanan dan kiri solid
  • border bawah double

Jika properti border-style memiliki dua nilai:

• border-style: dotted solid;
  • border atas dan bawah dotted
  • border kanan dan kiri solid

Jika properti border-stylememiliki satu nilai:

• border-style: dotted;
  • keempat sudut border dotted

Informasi: properti border-style digunakan dalam contoh di atas. Namun, ini juga berfungsi dengan properti border-width dan 

p {
    border-style: dotted solid;
    border-width: 2px 4px 6px 8px;
    border-color: blue green red black;
}

3

Border shorthand

Dengan border shorthand Anda bisa mempersingkat sebuah kode. Shorthand sendiri yang berarti “steno” atau menulis cepat. Dengan cara ini dimungkinkan juga untuk menentukan semua properti border dalam satu properti tunggal.

Untuk menggunakan border shorthand Anda cukup menggunakan properti 

p {
    border-style: dotted solid;
    border-width: 2px 4px 6px 8px;
    border-color: blue green red black;
}

Properti border shorthand berlaku untuk border dibawah ini:

• border-width
• border-style ( dibutuhkan )
• border-color

Contoh dibawah ini merupakan contoh penggunaan Border Shorthand atau border penyingkatan.

p {
    border: 5px solid blue;
}

CopyLighting

Editor Online

Anda juga dapat menentukan semua properti border individu hanya untuk satu sisi:

p {
    background-color: #ccc;
}
#p1 {
    border-top: 5px solid blue;
}
#p2 {
    border-right: 5px solid blue;
}
#p3 {
    border-bottom: 5px solid blue;
}
#p4 {
    border-left: 5px solid blue;
}

CopyLighting

Editor Online

Border-radius

Properti

p {
    border-style: dotted solid;
    border-width: 2px 4px 6px 8px;
    border-color: blue green red black;
}

Apa itu Border Styles?

Apa itu border bottom?

Apa itu Border Radius?