Borders

CSS Border

Apa itu CSS border?

Properti CSS border ini adalah untuk memberikan efek garis ke sekitar elemen yang diterapkan properti ini.

Nilai-nilai dalam CSS Border ini

border-width: mengatur ketebalan border.

  • Nilai numeric seperti unit px, rem, em, vw dan vh.
  • thin nilai setara dengan 1px.
  • medium nilai setara dengan 3px.
  • thick nilai setara dengan 5px.

Contoh:

    #border {
        border-width: thin / medium / thick / (px/rem/em/vw/vh);
    }

border-style: mengatur bagaimana bentuk garis border digambar disekitar elemen.

  • none - untuk menghilangkan garis border agar tidak terlihat sekaligus tidak memengaruhi posisi elemen lainnya.
  • solid - untuk membuat border dengan garis solid.
  • hidden - untuk membuat garis border yang sudah digambar tersembunyi, namun bisa memengaruhi posisi elemen lain.
  • dashed - untuk membuat border dengan garis yang saling hubung-menghubung.
  • dotted - untuk membuat border dengan garis titik-titik.
  • double - untuk membuat garis border akan digambarkan dua kali sekaligus.
  • groove - menambahkan efek seperti elemen ditekan terhadap dokumen, efek ini hanya bisa terjadi bila ada warna yang diterapkan pada border.
  • ridge - sama seperti properti groove, namun membuat efek seperti elemen dimunculkan terhadap dokumen, efek ini hanya bisa terjadi bila ada warna yang diterapkan pada border.
  • inset - memberikan efek garis border yang disetiap setengah bagian elemen mempunyai tone warna yang berbeda.
  • outset - sama seperti properti inset, namun sifatnya diterbalikan.
    #border {
        border-style: none / solid / hidden / dashed / dotted / double / groove / ridge / inset / outset;
    }

color mengatur warna dari garis border yang sudah/akan ditetapkan yang menerima nilai warna (rgb/rgba/hsl/hsla/nilai hex).

Cara penggunaan style border

Berikut ini adalah cara penggunaan style border yang efektif:

    #border {
        border: border-width / border-style / color;
    }

Border sides

Di CSS ada juga properti yang bisa kita gunakan untuk mengatur style border pada setiap sisi elemen kita.

  • border-top: untuk mengatur style border bagian atas
  • border-bottom: untuk mengatur style border bagian bawah
  • border-left: untuk mengatur style border sebelah kiri
  • border-right: untuk mengatur style border bagian kanan

Untuk cara penggunaan masih sama seperti sebelumnya yaitu:

    #border {
        border-top: border-width / border-style / color;
        border-bottom: border-width / border-style / color;
        border-left: border-width / border-style / color;
        border-right: border-width / border-style / color;
    }

Properti unik untuk memberikan efek border kepada elemen

border-collapse: properti menentukan apakah border dalam setiap sel yang ada pada </table> akan digabung atau dipisah pada setiap selnya.

  • collapse
  • separate
    #border {
        border-collapse: collapse / separate;
    }

border-image: selain memberikan warna kepada garis border, ada juga properti yang bisa digunakan untuk membuat border menjadi bergambar.

Contoh penggunaan:

    #border {
        border-image: url(direktori gambar kamu);
    }

border-radius: properti ini memberikan efek pada setiap sudut elemen menjadi lebih melingkar.

    #border {
        border-radius: 0%-100% / (px, rem, em, vw, vw);
    }
← Background
Border Radius →