Mudah Belajar CSS Part 8: CSS Borders

Assalamu'alaikum W.W

Pada tutorial sebelumnya kita telah mebahas CSS Backgrounds selanjutnya rekayasa ternak lele akan memberikan sedikit penjelasan tentang CSS Color. Oke langsung aja ke Cekidot!!!

Judul
Mudah Belajar  CSS Part 8: CSS Borders

Pengertian

Menurut Wikipedia CSS adalah “kode yang digunakan untuk mendefenisikan desain dari bahasa markup”.Salah satu bahasa markup lainnya HTML.

Secara umum CSS (Cascading Style Sheet) adalah kumpulan kode yang digunkanan untuk memformat halaman web yang ditulis dengan HTML maupun XHTML.

Latar Belakang

CSS merupakan salah satu modal dasar jika ingin menjadi web developer. Oleh karena itu, CSS sangat penting untuk dipahami dan dimengerti.

Maksud dan Tujuan
Bisa, mengerti dan memahami sintak-sintak CSS

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan
Border dalam bahasa Indonesia berarti batas. Border pada CSS meneyediakan pengaturan style, width, maupun color dari sebuah elemen border.

Border Style (Border Corak)
Properti border style digunakan untuk memilih tipe border yang akan ditampilkan.
Berikut style-setyle border:

• dotted – untuk membuat border titik
• dashed – untuk membuat border garis
• solid – untuk membuat border solid (garis tebal)
• double – untuk membuat border double
• groove – untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-color.
• ridge – untuk membuat border 3D ridge. Efek ini juga terjadi ketika ada nilai border-color.
• inset – untuk membuat 3D border masuk kedalam
• outset – untuk membuat 3D border
• none – untuk membuat tidak ada border
• hidden – untuk membuat border tersembunyi

Untuk properti border-style ini dapat mempunyai  satu sampai dengan empat nilai (top border, right border, bottom border, dan left border).

Contoh :

Border Width
Properti ini digunakan untuk mengatur leabar dari keempat sisi border. lebar ini dapat diatur menggunakan ukuran px, pt, cm, em, dll. Atau juga bisa menggunakan 3 nilai pre-defined: thin(tipis), medium(sedang), atau thick (tebal).
Contoh:

Border Color

Properti border-color digunakan untuk mengatur warna dari empat border. Warna dari border dapat diatur dengan menggunakan perintah:

• nama – menggunakan nama dari warna, misalnya “red”.
• Hex – menggunakan nilai hexadesimal, misalnya “#fff000”
• RGB – menggunakan nilai dari RGB (Red, Green, Blue), misalnya “rgb(0,255,0)”.
• transparent

Pada property border-color bisa mempunyai nilai satu sampai dengan empat nilai (untuk border atas, border kanan, border bawah dan border kiri). Jika properti dari border-color tidak didefinisikan, maka otomatis akan diwariskan dari element.

Contoh :

Kesimpulan
Border pada CSS meneyediakan pengaturan style, width, maupun color dari sebuah elemen border.

Referensi

https://www.w3schools.com/css/css_border.asp

Share this post