Membuat Lingkaran dengan CSS

Membuat Lingkaran dengan CSS

—

by

Webbiz.ID
in

Kali ini kita akan membahas bagaimana cara membuat lingkaran dengan menggunakan CSS.

Membuat Lingkaran dengan CSS

Buat element <div>…</div> dan buat class “lingkaran” nama Class ini yang akan digunakan untuk pada css.

CSS
.lingkaran {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}
CSS
HTML
<div class="lingkaran"></div>
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
.lingkaran {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  text-align: center;
}
</style>
</head>
<body>

<div class="lingkaran"></div>

</body>
</html>
HTML

Maka hasilnya :

Berikutnya saya ingin memberikan garis pada bagian luar lingkaran dengan CSS. Kalian hanya perlu menambahkan 1 perintah css.

CSS
border: 2px solid black;
CSS

Maka hasilnya:

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat border dan shadows pada lingkaran menggunakan CSS.

Artikel Terbaru ⭐