Cara Mengatur Garis Dengan CSS

Tutorial kali ini kita akan membahas bagaimana cara mengatur garis dengan css, perintah untuk membuat garis pada css yaitu dengan menggunakan border untuk mengatur garis tepi pada komponen.

Border memiliki banyak sintaks yang dipisahkan agar masing-masing sudut setiap garis tepi pada komponen dapat menentukan sendiri bagaimana style yang akan diterapkan pada tiap garis tepi tersebut.

Cara Membuat Garis Dengan CSS

Untuk membuat garis dengan css yang pertama adalah menentukan elemen mana yang akan digunakan untuk membuat garis dengan perintah border ini. Berikut ini contoh kode lengkap membuat garis dengan css.

border: 1px solid #000000;Code language: CSS (css)

Perintah diatas digunakan untuk membuat garis tepi warna hitam dengan ukuran garis 1 pixel dan tipe garis solid, sebenarnya perintah diatas dapat dipisahkan menjadi beberapa bagian pada css, hal tersebut mungkin dilakukan ketika untuk menentukan garis diatur secara dinamis.

border-width: 1px;
border-style: solid;
border-color: #000000;Code language: HTTP (http)

Kode diatas hasilnya sama saja dengan yang pertama, dengan pemisah sintaks diatas bisa digunakan untuk menentukan garis secara dinamis.

Cara Mengatur Garis Dengan CSS

Bagaimana cara mengatur garis dengan css? misalnya pada tiap tepi elemen memiliki gaya garis yang berbeda-beda, tentunya di css hal tersebut dapat dilakukan, karna sintaks border dipisah menjadi beberapa perintah untuk mengatur garis agar sesuai keinginan. Berikut ini penjelasan masing-masing properti yang bisa digunakan untuk mengatur garis dengan css.

Properti border-color pada css

Selain dengan menentukan warna garis dengan properti border-color, css mampu mengatur garis tepi dengan berbagai sudut properti untuk garis tepi pada elemen, berikut ini contohnya.

<style type="text/css">
    .border {
        border-width: 1px;
        border-style: solid;
        border-top-color: red;
        border-bottom-color: blue;
        border-left-color: green;
        border-right-color: yellow;
    }
 </style>

<div class="border">
    Menentukan warna garis tepi elemen
</div>Code language: HTML, XML (xml)

Kode diatas akan menghasilkan warna garis yang berbeda pada tiap bagian-bagian elemen di html.

Properti border-style pada css

Selain menentukan warna pada masing-masing sudut garis tepi elemen, css juga mendukung pengaturan gaya border pada masing-masing sudut garis tepi elemen, berikut ini masing-masing gaya border yang bisa digunakan untuk menentukan tipe garis.

• none tidak ada border (sama seperti border-width: 0)
• solid border dengan satu garis solid
• dotted border dengan garis titik-titik (dots)
• dashed border dengan gaya garis pendek terputus-putus
• double border dengan dua garis solid
• groove border dengan gaya seperti masuk kedalam halaman
• ridge border dengan gaya seperti timbul
• inset border dengan gaya seperti tertaman pada halaman
• outset border dengan gaya seperti keluar dari halaman
• hidden sama seperti none, tidak tampil pada halaman.

Untuk menentukan masing-masing tipe pada garis tepi elemen yaitu dengan menggunakan perintah border-[posisi]-style, berikut ini penjelasan lengkapnya.

• border-top-style digunakan untuk menentukan gaya bagian atas garis tepi
• border-bottom-style digunakan untuk mengatur gaya pada bagian bawah garis tepi
• border-left-style digunakan untuk mengatur gaya pada bagian kiri garis tepi
• border-right-style digunakan untuk mengatur gaya pada bagian kanan garis tepi

Mari kita lihat contoh penggunaan masing-masing properti diatas.

<style type="text/css">
    .border {
        border-width: 5px;
        border-top-style: solid;
        border-bottom-style: dotted;
        border-left-style: dashed;
        border-right-style: double;
    }
 </style>

<div class="border">
    Menentukan gaya garis tepi elemen
</div>Code language: HTML, XML (xml)

Berikut ini tampilan dari hasil kode diatas…

Properti border-width pada css

border width digunakan untuk menentukan besar ukuran atau lebar garis yang dihasilkan, pada masing-masing sudut elemen dapat ditentukan dengan menambahkan posisi pada properti border-wdith. berikut ini contoh kode lengkap masing-masing properti border-width dengan posisinya.

<style type="text/css">
    .border {
        border-color: #000;
        border-style: solid;

        border-top-width: 5px;
        border-bottom-width: 3px;
        border-left-width: 2px;
        border-right-width: 1px;
    }
 </style>

<div class="border">
    Menentukan ukuran garis tepi elemen
</div>Code language: HTML, XML (xml)

Dari kode diatas akan menghasilkan masing-masing ukuran yang berbeda pada setiap posisi garis tepi pada elemen dengan class border tersebut, berikut ini tampilan browser hasil kode diatas.

Properti singkat untuk mengatur masing-masing garis tepi

Selain dengan menggunakan properti border untuk menentukan garis hanya dengan satu baris, di css dapat menggunakan border-[posisi] untuk mengatur garis tepi masing-masing posisi, bedanya jika hanya dengan menggunakan border digunakan untuk menentukan seluruh posisi pada garis tepi, namun apabila dengan border-[posisi] masing-masing garis tepi dapat ditentukan sendiri style-nya.

border-top: 1px solid #000;Code language: CSS (css)

Contoh properti diatas digunakan utuk menentukan garis bagian atas saja, berikut ini masing-masing properti untuk menentukan tiap-tiap style pada garis dengan css.

• border-top untuk mengatur garis bagian atas
• border-bottom untuk mengatur garis pada bagian bawah
• border-left digunakan untuk mengatur garis pada bagian kiri
• border-right digunakan untuk mengatur garis pada bagian kanan

Itulah masing-masing properti untuk menentukan tiap-tiap garis tepi pada posisi yang berbeda, sekain tutorial ini semoga bermanfaat.