Cara Membuat Bingkai/Garis Tepi Dengan CSS ( Border )

A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Baca Juga : Cara Mempersingkat Penulisan CSS

Fungsi CSS
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

B. Cara Membuat Bingkai/Garis Tepi Dengan CSS ( Border )
Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya ada tiga property yang harus anda set, yaitu color, style dan width. border-color : black; border-style : solid; border-width : 5px; namun anda juga dapat menggunakan CSS shorthand sehingga menjadi seperti berikut : 

border : width style color;

jadi jika kita ubah contoh kode di atas menjadi CSS-shorthand, kodenya menjadi seperti berikut :

border : 5px solid black;

Tersedia di Bacacoding: 

• Cara membuat Jarak antar elemen tag HTML (Margin)
• Cara Mempersingkat Penulisan CSS
• Cara Mmebuat Pading dengan CSS

Cobalah tambahkan kode tersebut pada latihan sebelumnya dan yang akan anda dapatkan adalah seperti berikut :

Sama halnya dengan Padding, penambahan property border juga akan merubah ukuran dari .box.

Jadi, seperti yang saya jelaskan sebelumnya. Ketika anda ingin membuat ukuran lebar .box tetap 100px, maka anda harus menghitung ulang width dari .box tersebut.

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya jika kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena 5px untuk left, dan 5px untuk right) akan ditambahkan pada ukuran .box tersebut. Sehingga ukuran .box berubah kembali menjadi 110px.

Untuk itu kita kurangi width dari .box tersebut menjadi 70px sehingga : 70px (width) + 20px (padding) + 10px (border) = 100px.

Dalam dunia CSS, kasus seperti ini disebut dengan box-model. Terdapat dua property yang mempengaruhi ukuran dari sebuah box yaitu padding dan border.

Tahukah anda, bahwa setiap elemen/tag HTML ditampilkan dalam bentuk box/kotak, jadi aturan box-model berlaku untuk seluruh elemen HTML

Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu yang dimaksud dengan Border pada CSS? Mungkin itu saja tulisan yang membahas tentang pengertian Border pada CSS, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

Share :