Belajar CSS Part 3 Membuat Border Dengan CSS

Assalamualaikum Wr. Wb.

PENGERTIAN

Border merupakan sebuah properti yang berfungsi untuk memberikan batas antara element satu dengan element yang lainnya. Di dalam CSS properti border ini berfungsi untuk memberikan warna, lebar, gaya pada batas tersebut. Dengan begitu kita dapat memberi batas antara kata, baris lebih indah dan menarik.

LATAR BELAKANG

Memberikan properti yang dapat memperindah border/batas pada sebuah kata, kalimat, maupun paragrap.

MAKSUD & TUJUAN

Dapat menghasilkan border yang menarik.

Borde lebih hidup.

ALAT & BAHAN

Text Editor
Browser

LANGKAH KERJA

Pada dasarnya fungsi CSS yaitu mendesain sebuah web. Pada bagian CSS border ini, CSS memiliki beberapa properti dalam mengubah border tersebut. Langsung saja kita lihat contohnya.

Tipe -Tipe Border pada CSS

dotted - Mendefinisikan border dengan pola titik.dashed - Mendefinisikan border dengan pola garis putus-putus.solid - Mendefinisikan sebuah border yang solid.double - Mendefinisikan sebuah 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 dengan 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.

Untuk contohnya bisa dilihat di gambar berikut.

Untuk penulisannya bisa dilihat dari gambar di atas. Untuk hasilnya bisa dilihat gambar di bawah ini.

Penggunaan tipe border ini tergantung pada kebutuhannya masing-masing.

Border-width

Pada properti ini berfungsi untuk mengatur lebar dari border tersebut. Untuk ukurannya bisa menggunakan (px, em, pt, cm, dll) atau juga bisa menggunakan perintah thin, medium, thick.

Contoh penggunaanya dapat dilihat pada gambar berikut.

Kita akan mengatur ukuran border dengan properti yang berbeda-beda.

Hasil di atas adalah perbedaan dari lebar border. Penggunaan lebar ini juga sesuai dengan kebutuhan anda. Terserah mau makai yang mana, tapi jika belum paham coba di ulangi :D. Lanjut ke properti selanjutnya.

Border-color

Properti ini berfungsi untuk mengatur warna border di dalam CSS border. Pada border-color kita dapat mengatur 4 warna yaitu (border atas, border bawah, border kanan, border kiri). Untuk mengatur warna tersebut bisa menggunakan element berikut.