Di bawah ini kita akan mempelajari cara membuat lingkaran kosong dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; } </style> </head> <body> <div style="text-align:center"> <h1>Conoth Round Dots / Circles</h1> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </body> </html>
Cara Membuat Circle
Langkah 1) Tambahkan HTML:
Contoh
<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span>
Langkah 2) Tambahkan CSS:
Untuk membuat lingkaran / circle, gunakan properti border-radius dan setel nilainya menjadi 50%. Kemudian gabungkan properti width dan height dengan nilai yang cocok:
Contoh
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}