Pembahasan Lengkap CSS Border

Oleh Unknown

Wednesday, September 30, 2015

Pembahasan Lengkap CSS Border - CSS adalah salah satu bahasa pemrograman yang wajib dipahami jika kamu hobi di dunia web dan ingin membangun web yang menarik. Bahasa CSS ini bertujuan untuk menghias dan mengatur gaya tampilan atau layout halaman web supaya tampil lebih elegan, profesional, dan menarik.

Pada saat mengatur model layout halaman web dengan CSS, maka ada beberapa properti CSS yang pasti akan kamu butuhkan. Misalnya properti CSS border, padding, margin, dan sebagainya yang semua itu penting untuk mendapatkan hasil tampilan yang pas dan good looking. Simak terlebih dahulu ilustrasi border, padding, dan margin pada postingan mengatur model layout CSS.

Pada kesempatan ini, sinahu coding akan membahas secara lebih spesifik dan mendalam masalah border. Border adalah garis tepi atau batas pada suatu elemen. Posisi border terletak setelah padding dan sebelum margin. Biar jelas, ilustrasi untuk posisi padding, border, margin sudah dibahas di mengatur model layout css.

Pada properti CSS border ini ada beberapa hal yang bisa kamu lakukan. Yaitu mengatur gaya border (border-style), besar ukuran border (border-width), dan warna border (border-color) dari suatu elemen. Masing-masing akan dibahas satu per satu.

Jenis-jenis Properti CSS pada CSS Border

Border Style

Properti border-style berfungsi untuk menentukan jenis style border seperti apa yang akan digunakan untuk suatu elemen web. Beberapa jenis style border yang bisa digunakan adalah sebagai berikut :

dotted: border dengan tampilan titik putus-putus
dashed: border dengan tampilan garis putus-putus
solid: border dengan garis solid/garis normal
double: border dengan gaya tampilan garis double
groove: gaya 3D Groove border
ridge: gaya 3D ridged border
inset: gaya 3D inset border
outset: gaya 3D outset border

Lebih jelasnya, masing-masing style border tersebut akan menampilkan hasil seperti di bawah ini :

Kita juga bisa mengatur tiap sisi border dengan style berbeda-beda. Di bawah ini adalah contoh mengatur border style berbeda-beda pada tiap sisinya. Atas bawah kanan kiri diatur dengan style border yang berbeda-beda. Atas bawah menggunakan style dotted, sementara kanan kiri menggunakan style solid.


<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
</style>
</head>
<body>

<p>ini contoh mengatur border style berbeda-beda pada setiap sisinya. Atas bawah kanan kiri diatur dengan style border yang berbeda-beda. Atas bawah menggunakan style dotted, sementara kanan kiri menggunakan style solid.</p>

</body>
</html>

hasilnya :

Border Width

Properti border-width ini digunakan untuk mengatur besar lebar border atau ketebalan border. mengatur besar width bisa menggunakan ukuran pixel atau menggunakan nama-nama ukuran tertentu, yaitu thin (tipis) , medium (sedang), atau thick (tebal).

Sebagai catatan bahwa properti border-width ini tidak akan berfungsi jika berdiri sendiri. Harus dibarengi dengan border-style. Contoh penulisan coding border-width seperti ini.


<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}

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

p.three {
    border-style: solid;
    border-width: 1px;
}
</style>
</head>
<body>

<p class="one">Teks di Sini</p>
<p class="two">Teks di Sini</p>
<p class="three">Teks di Sini</p>

</body>
</html>

maka hasilnya :

Border Color

Properti border-color berfungsi untuk menentukan warna border. Sama halnya dengan border-width, border-color ini juga tidak bisa berdiri sendiri dalam penulisan codingnya. Harus dibarengi dengan border-style terlebih dahulu. Di bawah ini adalah contoh mengatur border dengan warna merah dan biru.


<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: blue;
} 
</style>
</head>
<body>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>

</body>
</html>

maka hasilnya :

Penulisan Versi Pendek CSS Border

Sebagaimana kalian perhatikan contoh-contoh di atas, ada banyak properti yang digunakan saat mengatur border. Ada border-style, border-width, border-color dan atribut-atributnya. Sehingga cukup menyita waktu untuk menuliskan semuanya.

Padahal itu semua bisa dipangkas dan diringkas hanya pada satu properti border saja. Yaitu dengan urutan border-width, border-style, kemudian border-color. Contohnya seperti berikut ini.


border: 5px solid red;

Maksudnya adalah bahwa border diatur dengan width atau ketebalan sebesar 5px. Dengan border-style jenis solid dan warna border adalah red.

Lebih ringkas kan? hasilnya akan sama dengan kita menuliskan semua propertinya satu per satu. Tapi mengetahui penggunaan dan penulisan masing-masing properti border itu penting sebagai dasar.

Itulah pembahasan tentang CSS border lengkap dengan macam-macam properti border yang digunakan dalam mengatur border sebuah elemen halaman web. Semoga bermanfaat buat konco sinahu semua. Tetap semangat belajar coding.

Pembahasan Lengkap CSS Border

Jenis-jenis Properti CSS pada CSS Border

Border Style

Border Width

Border Color

Penulisan Versi Pendek CSS Border

1 Komentar untuk "Pembahasan Lengkap CSS Border"