Sabtu, 07 April 2018

Belajar CSS Part 6 - Membuat Border (Garis Tepi)


Properti Border pada CSS
Properti border pada CSS memungkinkan kita untuk menentukan style, lebar, dan warna border dari sebuah elemen border.

Border Style
Properti border-style digunakan untuk menentukan jenis border yang akan ditampilkan.

Berikut adalah properti border yang bisa digunakan:
  • dotted - Mendefinisikan border bertitik
  • dashed - Mendefinisikan border putus-putus
  • solid - Mendefinisikan sebuah border yang solid
  • double - Mendefinisikan border ganda
  • groove - Mendefinisikan sebuah border berlekuk 3D. Efeknya tergantung pada nilai border-color
  • ridge - Mendefinisikan sebuah border bergerigi 3D. Efeknya tergantung pada nilai border-color
  • inset - Mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color
  • outset - Mendefinisikan sebuah border awal 3D. Efeknya tergantung pada nilai border-color
  • none - Mendefinisikan tidak ada border 
  • hidden - Mendefinisikan border tersembunyi

Properti border-style dapat memiliki satu sampai empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).
Contoh
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;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-style</h2>
<p>Properti-properti berikut adalah untuk menentukan jenis border yang akan ditampilkan:</p>

<p class="dotted">Border titik-titik</p>
<p class="dashed">Border yang putus-putus</p>
<p class="solid">Border yang solid</p>
<p class="double">Border yang double</p>
<p class="groove">Border yang berlekuk 3D</p>
<p class="ridge">Border yang bergerigi 3D</p>
<p class="inset">Border dalam 3D</p>
<p class="outset">Border luar 3D</p>
<p class="none">Border yang ditiadakan</p>
<p class="hidden">Border yang tersembunyi</p>
<p class="mix">Border yang berupa gabungan dari beberapa border</p>

</body>
</html>

Hasilnya:

Border Width
Properti border-width digunakan untuk menentukan lebar dari empat sisi border. Lebar border dapat ditetapkan sebagai ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan, yaitu thin, medium, atau thick.

Properti border-width dapat memiliki satu hingga empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).
Contoh
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-width</h2>
<p>Properti ini menentukan lebar dari empat sisi border:</p>

<p class="one">Disini text.</p>
<p class="two">Disini text.</p>
<p class="three">Disini text.</p>
<p class="four">Disini text.</p>
<p class="five">Disini text.</p>
<p class="six">Disini text.</p>
<p class="seven">Disini text.</p>

<p><b>Catatan:</b>
Properti "border-width" tidak berfungsi jika digunakan hanya pada satu sisi saja.
Tentukan terlebih dahulu properti "border-style" untuk mengatur border.</p>

</body>
</html>

Hasilnya:
Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Color
Properti border-color digunakan untuk mengatur warna dari empat garis tepi (border). Dalam border-color, warna paling sering ditentukan dengan menggunakan:
  • nama warna yang valid - seperti "blue"
  • nilai HEX - seperti "#0000FF"
  • nilai RGB - seperti "rgb (0,0,255)"
  • Transparent

Properti border-color dapat memiliki satu hingga empat nilai (untuk border atas, border kanan, border bawah, dan border kiri).
Contoh
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti border-color</h2>
<p>Properti ini digunakan untuk menentukan warna dari empat sisi border:</p>

<p class="one">Warna merah solid</p>
<p class="two">Warna hijau solid</p>
<p class="three">Memiliki lebih dari satu warna border</p>

<p><b>Catatan:</b>
Properti "border-width" tidak berfungsi jika digunakan hanya pada satu sisi saja.
Tentukan terlebih dahulu properti "border-style" untuk mengatur border.</p>

</body>
</html>

Hasilnya:
Catatan: Properti "border-width" tidak berfungsi jika digunakan hanya sendiri. Oleh karena itu, gunakan properti "border-style" untuk mengatur border.

Border Style yang Berbeda
Seperti halnya pada contoh di atas, pada contoh ini kita akan belajar menentukan border-style yang berbeda pada masing-masing sisi border.
Contoh
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Memiliki 2 border yang berbeda</p>

</body>
</html>

Hasilnya:

Contoh di atas memberikan hasil yang sama dengan menggunakan style (CSS) seperti ini:
Contoh
p {
    border-style: dotted solid;
}

Berikut adalah cara kerjanya:

Jika properti border-style memiliki empat nilai:
border-style: dotted solid double dashed;
  • border atas adalah titik-titik (dotted)
  • border kanan adalah padat (solid)
  • border bawah adalah ganda (double)
  • border kiri adalah putus-putus (dashed)

Jika properti border-style memiliki tiga nilai:
border-style: dotted solid double;
  • border atas adalah titik-titik (dotted)
  • border kanan adalah padat (solid)
  • border bawah adalah ganda (double)

Jika properti border-style memiliki dua nilai:
border-style: dotted solid;
  • border atas adalah titik-titik (dotted)
  • border kanan adalah padat (solid)

Jika properti border-style memiliki satu nilai:
border-style: dotted;
  • keempat border adalah titik-titik (dotted)

Properti border-style digunakan dalam contoh di atas sebaiknya bersamaan dengan properti border-width dan border-color agar memberikan hasil yang sempurna.

Mempersingkat Pengkodean (Shorthand)
Dalam membuat border, kita seringkali dihadapkan dengan banyaknya properti sehingga membuat kita harus mengetikkan banyak kode sehingga menghasilkan hasil yang sesuai dengan yang kita inginkan.

Untuk mempermudah kita dalam pengkodean, kita bisa mempersingkat penulisan kode sehingga kita hanya perlu menuliskan satu properti kemudian diterapkan ke beberapa properti.

Kita perlu menggunakan properti border untuk mempersingkat pengkodean dalam mengabungkan beberapa properti border.
  • border-width
  • border-style (wajib)
  • border-color
Contoh
p {
    border: 5px solid red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Kita juga dapat menentukan semua properti border hanya untuk satu sisi saja:
Contoh
Border kiri
p {
    border-left: 6px solid red;
    background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Border bawah
p {
    border-bottom: 6px solid red;
    background-color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Properti Border</h2>
<p>Properti ini adalah peroperti untuk mempersingkat pengkodean untuk lebar border, style border, dan warna border.</p>

</body>
</html>

Hasilnya:

Border Bulat (Rounded Borders)
Apabila kita ingin membuat border memiliki sudut yang tumpul atau bulat, gunakan properti border-radius.
Contoh
p.normal {
    border: 2px solid red;
}

p.bulat1 {
    border: 2px solid red;
    border-radius: 5px;
}

p.bulat2 {
    border: 2px solid red;
    border-radius: 8px;
}

p.bulat3 {
    border: 2px solid red;
    border-radius: 12px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2> Properti border-radius</h2>
<p>Properti ini digunakan untuk membuat border agar membulat</p>

<p class="normal">Border normal</p>
<p class="bulat1">Border bulat</p>
<p class="bulat2">Border bulat</p>
<p class="bulat3">Border bulat</p>

<p><b>Note:</b> Properti "border-radius" tidak didukung di IE8 (dan versi sebelumnya)</p>

</body>
</html>

Hasilnya:
Catatan: Properti "border-radius" tidak didukung di IE8 (dan versi sebelumnya).
Di bawah ini adalah properti-properti border:
border  Menetapkan semua properti border dalam satu deklarasi
border-bottom Menetapkan semua properti sisi bawah border dalam satu deklarasi
border-bottom-color Menetapkan warna untuk sisi bawah border
border-bottom-style Menetapkan style untuk sisi bawah border
border-bottom-width Menetapkan lebar untuk sisi bawah border
border-color Menetapkan warna untuk keempat sisi border
border-left Menetapkan semua properti sisi kiri border dalam satu deklarasi
border-left-color Menetapkan warna untuk sisi kiri border
border-left-style Menetapkan style untuk sisi kiri border
border-left-width Menetapkan lebar untuk sisi kiri border
border-radius Menetapkan semua sudut border agar membulat
border-right Menetapkan semua properti sisi kanan border dalam satu deklarasi
border-right-color Menetapkan  warna untuk sisi kanan border
border-right-style Menetapkan style untuk sisi kanan border
border-right-width Menetapkan lebar untuk sisi kanan border
border-style Menetapkan style untuk keempat sisi border
border-top Menetapkan semua properti sisi atas border  dalam satu deklarasi
border-top-color Menetapkan warna sisi atas border
border-top-style Menetapkan style sisi atas border
border-top-width Menetapkan lebar sisi atas border
border-width Menetapkan lebar di empat sisi border

Demikian pembahasan mengenai cara membuat, mendesain dan mendeklarasikan border (garis tepi) dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Bagikan

Artikel Terkait

Belajar CSS Part 6 - Membuat Border (Garis Tepi)
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan! Terima Kasih...

2 Komentar: