Skip to content Skip to sidebar Skip to footer
Home / Programer / Sharing

Belajar Border CSS Mudah


Pada sesi pembelajaran kita kali ini, saya akan membahas mengenai css borders yaitu sebuah elemen pada website yang memiliki garis tepi di sekeliling elemennya.

Pada elemen tersebut dapat kita bentuk bordernya menjadi persegi atau bulat, itupun tergantung dari properti border apa yang  kita gunakan.


3 Properti Border di CSS

Mengenai properti border pada css, terdapat 3 properti yang biasanya digunakan yaitu

  1. border-style
  2. border-width
  3. border-color

Berikut ini penjelasan dari ketiga properti border css tersebut:

1. Border Style

Properti css border-style digunakan untuk mengatur  gaya garis dari keempat sisi perbatasan dari sebuah elemen website. 

Nilai yang biasanya digunakan untuk properti border-style ini diantaranya

  • none: digunakan untuk tidak menampilkan border
  • hidden: kegunaannya sama dengan nilai none diatas
  • dotted: menampilkan serangkaian titik bulat border.
  • dashed: menampilkan serangkaian border garis putus-putus atau segmen garis.
  • solid : menampilkan satu, lurus, garis padat.
  • double : menampilkan dua garis lurus
  • groove : menampilkan batas dengan tampilan ukiran
  • ridge : menampilkan batas dengan tampilan yang diekstruksi
  • inset : menampilkan batas yang membuat elemen tampak tertanam
  • outset : menampilkan batas yang membuat elemen tampak timbul

Contoh penerapan kode css-nya terhadap beberapa elemen p(paragraf) dibawah ini


p.none { border-style: none; }

p.hidden { border-style: hidden; }

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; }

Berikut untuk penerapannya dengan kode html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Border Style CSS</title>
    <style>
    p.none { border-style: none; }

    p.hidden { border-style: hidden; }

    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; }
    </style>
</head>
<body>
    
    <p class="none">Belajar border-style dengan StayKoding</p>

    <p class="hidden">Belajar border-style dengan StayKoding</p>

    <p class="dotted">Belajar border-style dengan StayKoding</p>

    <p class="dashed">Belajar border-style dengan StayKoding</p>

    <p class="solid">Belajar border-style dengan StayKoding</p>

    <p class="double">Belajar border-style dengan StayKoding</p>

    <p class="groove">Belajar border-style dengan StayKoding</p>

    <p class="ridge">Belajar border-style dengan StayKoding</p>

    <p class="inset">Belajar border-style dengan StayKoding</p>
    
    <p class="outset">Belajar border-style dengan StayKoding</p>

</body>
</html>

ketika ditampilkan pada browser maka akan tampil seperti ini

border-style di css border


2. Border Width

Kita dapat menentukan lebar batas elemen menggunakan properti css border-width.

Nilai yang biasanya digunakan diantaranya

  • thin : menampilkan batas tipis.
  • medium : menampilkan batas sedang
  • thick : menampilkan batas yang tebal
  • <length> : ukuran yang kita tentukan

Contoh Penggunaan border-width


div {
  /* border-width dibawah ini menggunakan nilai <length> yaitu px */
  border-width: 10px;

  border-style: solid;

  width: 250px;

  height: 250px;

  background: #1cbfc3;

}

contoh dengan kode html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Border With CSS</title>
    <style>
    div {
        /* border-width dibawah ini menggunakan nilai <length> yaitu px */
        border-width: 10px;

        border-style: solid;

        width: 250px;

        height: 250px;

        background: #1cbfc3;

    }
    </style>
</head>
<body>
    
    <div></div>

</body>
</html>

dari kodingan border-width diatas ketika dibuka dengan browser maka akan tampil seperti ini

border-width di css border


3. Border Color

Properti css border-color berfungsi untuk mendefinisikan warna apa yang digunakan pada sebuah border.

nilai yang biasanya digunakan adalah

  • <color> : nilai warna (nama warna, hex warna,dan rgb warna).

Contoh


div {

  border-style: groove;

  border-width: 5px;

  border-color: magenta;

  width: 250px;

  height: 250px;

  background: #1cbfc3;

}

untuk contoh penerapannya dengan kode html, dapat dilihat dibawah ini


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Border Color CSS</title>
    <style>
    div {

        border-style: groove;

        border-width: 5px;

        /* border-color dengan warna magenta */
        border-color: magenta;

        width: 250px;

        height: 250px;

        background: #1cbfc3;

    }
    </style>
</head>
<body>
    
    <div></div>

</body>
</html>

dari kodingan border-color diatas, saat dilihat dibrowser akan tampil seperti dibawah

border-colordi css border


CSS border – individual sides

css border individual sides merupakan istilah untuk satu properti css yang mengatur satu sisi di satu bagian sisi elemen itu saja.

Penjelasan secara singkatnya yaitu kita dapat menentukan gaya batas, lebar, dan warna disetiap sisinya (atas, bawah, kanan, kiri) dengan menggunakan  masing-masing satu properti css khusus.

Properti apa sajakah itu? berikut beberapa properti yang digunakan

  • border-top-style : berfungsi mengatur gaya atas border
  • border-right-style : berfungsi mengatur gaya kanan border
  • border-bottom-style : berfungsi mengatur gaya bawah border
  • border-left-style : berfungsi mengatur gaya kiri border
  • border-top-width : berfungsi mengatur lebar atas border
  • border-right-width : berfungsi mengatur lebar kanan border
  • border-left-width : berfungsi mengatur lebar kiri border
  • border-bottom-width : berfungsi mengatur lebar bawah border
  • border-top-color : berfungsi mengatur warna atas border
  • border-right-color : berfungsi mengatur warna kanan border
  • border-bottom-color : berfungsi mengatur warna bawah border
  • border-left-color : berfungsi mengatur warna kiri border

Mengubah gaya perbatasan disetiap sisi contoh:


div {

  border-top-style: solid;

  border-right-style: dotted;

  border-bottom-style: dashed;

  border-left-style: groove;

  border-width: 5px;

  border-color: red;

  width: 250px;

  height: 250px;

  background: lightgrey;

}

Mengubah warna tepi pada setiap sisi contoh:


div {

  border-top-color: blue;

  border-right-color: red;

  border-bottom-color: green;

  border-left-color: gold;

  border-style: solid;

  border-width: 5px;

  width: 250px;

  height: 250px;

  background: #1cbfc3;

}

CSS Border – Shorthand Property

Properti css yaitu border menetapkan batas elemen. Ini merupakan singkatan peroperti css berikut:

  • border-width
  • border-style
  • border-color

Seperti semua properti singkatan, setiap sub-nilai yang dihilangkan akan diatur ke sub-nilai awalnya.

Namun, dalam properti singkatan ini, nilai border-style diperlukan.

Untuk urutannya sendiri tidak masalah.

Contoh


div {

  border: 1px solid black;

  width: 250px;

  height: 250px;

  background: #1cbfc3;

}

CSS Border – Specifying Values

Properti css yaitu border-style, border-width, dan border-color dapat memiliki satu, dua, tiga atau 4 nilai/value.

Satu Nilai/One Value

Ketika satu nilai ditentukan, itu menerapkan gaya, lebar, atau warna yang sama pada keempat sisinya.

Contoh


div{

  width: 250px;

  height: 250px;

  background: #1cbfc3;

  margin: 10px;

}

/* border-style dengan one value */

#style {

  border-style: dashed;

  border-width: 10px;

  border-color: red;

}

/* border-width dengan one value */

#width {

  border-style: solid;

  border-width: 10px;

  border-color: red;

}

/* border-color dengan one value */

#color {

  border-style: solid;

  border-width: 10px;

  border-color: red;

}

Dua nilai/Two value

Saat dua nilai ditentukan, pertama gaya, lebar, atau warna diterapkan ke atas dan bawah, yang kedua kekiri dan kanan.

Contoh


div{

  width: 250px;

  height: 250px;

  background: #1cbfc3;

  margin: 10px;

}

/* border-style dengan two value */

#style {

  border-style: dotted dashed;

  border-width: 10px;

  border-color: red;

}

/* border-width dengan two value */

#width {

  border-style: solid;

  border-width: 10px 15px;

  border-color: red;

}

/* border-color dengan two value */

#color {

  border-style: solid;

  border-width: 10px;

  border-color: red green;

}

Tiga nilai/Three value

Ketika tiga nilai ditentukan, gaya, lebar, atau warna pertama diterapkan keatas, yang kedua ke kiri dan kanan, yang ketiga ke bawah.

Contoh 


div{

  width: 250px;

  height: 250px;

  background: #1cbfc3;

  margin: 10px;

}

/* border-style dengan three value */

#style {

  border-style: groove dotted dashed;

  border-width: 10px;

  border-color: red;

}

/* border-width dengan three value */

#width {

  border-style: solid;

  border-width: 10px 15px 10px;

  border-color: red;

}

/* border-color dengan three value */

#color {

  border-style: solid;

  border-width: 10px;

  border-color: blue red green;

}

Empat nilai/ Four value

Ketika empat nilai ditentukan, gaya, lebar, atau warna berlaku masing-masing ke atas, kanan, bawah, dan kiri dalam urutan itu (searah jarum jam).

Contoh 


div{

  width: 250px;

  height: 250px;

  background: #1cbfc3;

  margin: 10px;

}

/* border-style dengan four value */

#style {

  border-style: solid dashed solid dashed;

  border-width: 10px;

  border-color: red;

}

/* border-width dengan four value */

#width {

  border-style: solid;

  border-width: 5px 10px 15px 20px;

  border-color: red;

}

/* border-color dengan four value */

#color {

  border-style: solid;

  border-width: 10px;

  border-color: blue red green gold;

}

Catatan! Properti border meningkatkan ukuran luar elemen kecuali elemen <table> dan <td>. Misalnya, elemen dengan lebar dan tinggi 20 piksel dan batas/border 5 piksel akan memiliki lebar dan tinggi luar 30 piksel (lebar 20 piksel + lebar tepi kiri 5 piksel + lebar tepi kanan 5 piksel = lebar luar 30 piksel).

ok cukup sekian pembahasan saya kali ini mengenai css border diatas yang telah saya jelaskan. terimakasih sudah membaca artikel ini, semoga menambah pengetahuan teman-teman yang membaca.