Cara Membuat Box atau Kotak Dengan CSS

Cara Membuat Box atau Kotak Dengan CSS

Untuk membuat box atau kotak dengan menggunakan CSS kamu memerlukan beberapa property utama yaitu width, height, dan background. Width digunakan untuk mengatur lebar dari sebuah kotak, dengan value angka dengan satuan px. Sedangkan untuk height digunakan untuk mengatur tinggi dari sebuah box dengan satuan px. Dan background digunakan untuk mengatur warna dari sebuah box.

Cara Membuat Box atau Kotak Dengan CSS

Dari ketiga value diatas dari namanya tentu sudah dapat mengetahui apa kegunaannya, selain dari ketiga value diatas kita juga memerlukan sebuah tag HTML yaitu tag div (<div></div>). Dan cara penggunaannya beserta contoh kode boxnya adalah sebagai berikut :

Pada contoh kode diatas terdapat 2 buah tag div yang memiliki nama id berbeda yaitu box1 dan box2. Nama id itulah yang digunakan CSS sebagai selector untuk membuat box. Pada baris no 7 terdapat sebuah selector ID CSS bernama box1, didalam selector tersebut terdapat beberapa property dan value yaitu :

  • width:150px; digunakan untuk mengatur lebar box yaitu sebesar 150px.
  • height:150px; digunakan untuk mengatur tinggi box yaitu sebesar 150px.
  • background:green; digunakan untuk mengatur warna dari box, yaitu grenn (hijau).

Kemudian pada baris no 12 terdapat selector ID bernama box2 yang inti fungsinya sama dengan selector ID box1. Pada kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Gambar Hasil Membuat Box atau Kotak Dengan CSS

Membuat Box Border

Untuk membuat box yang pingirnya terdapat border kamu tinggal menambahkan property border didalam selector box. Untuk penjelasan border secara mendetail sudah dijelaskan di seri membuat border pada CSS. Dan untuk menambahkan property border kamu dapat melihat contoh kode dibawah ini :

Dari contoh kode diatas maka akan tampil seperti berikut :

Gambar Box Dengan Border

Membuat Box Radius

Untuk membuat box radius atau box yang sudutnya tidak lancip kamu dapat menggunakan property border-radius dengan value angka dengan satuan px, semakin besar angka yang digunakan maka lengkungan yang ada di sudut box semakin dalam. Dan contoh kode untuk membuat box radius sebagai berikut :

Dari contoh kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Gambar Box Radius

Pada box diatas belum terlihat rapi, untuk merapikannya kita dapat menggunakan property margin dan padding yang akan kita pelajari di seri selanjutnya.

Saya kira untuk penjelasan cara membuat box atau kotak dengan menggunakan CSS ini cukup jelas, apabila kamu memiliki pertanyaan silakan sampaikan dikolom komentar dibawah.


Kolom Komentar

Related Post