CSS, buat bulatan guna DIV 08/11/2018

PETAK adalah asas dalam HTML. setiapkali kita code apa-apa elemen, ia akan berada dalam bentuk petak.

<div> 
    content elemen disini
</div>

hasilnya?

content elemen disini

 

Cara jadikan elemen DIV sebagai circle atau bulatan

  1. Tambah class pada div
  2. Center text
  3. set line-height untuk text didalam
  4. Set width dan height
  5. Code css menggunakan fungsi border-radius: Xpx dan fungsi border

 

ini codenya:

<div class="bulatanDiv">
    Content disini
</div><!-- bulatanDiv -->
.bulatanDiv{
    width:100px;
    height:100px;
    border-radius:100px;
    border: 1px solid #000;
    text-align:center;
    line-height:100px;
}

 

HASIL:

Content disini

maka, akan terjadinya bulatan tersebut.

Selamat mencuba!

hamizulfaiz profile picture

Mengenai Penulis

Saya HAMIZULFAIZ. Freelance web developer di Ampang, Selangor.

Berminat untuk menjadi klien saya? Hubungi saya dan lihat bagaimana proses bisnes anda boleh menjadi lebih efisyen!