Cara Membuat Lingkaran Di HTML Dengan CSS

Ahlikode.com - Pada tutorial ini, saya ingin mencoba  membuat lingkaran di html dengan css, ohiya. sebelumnya saya sudah membuat tutorial Membuat Sidebar. jangan lupa di baca ya.

Langsung saja ikuti langkah - langkah ini, sebagai berikut

Pada `class="TutorialCSS"` kalian bebas memberi nama atau id class ="contoh1". tetapi, saya menggunakan `class="TutorialCSS"`

Kode HTML:

<div class="TutorialCSS"></div>

Kode CSS: 

 .TutorialCSS{
    width: 200px;
    height: 200px;
    background: #2c2cda;
    border-radius: 100%;
  } 

Lalu, Kalian coba buka di browser  dan alhasil muncul seperti gambar dibawah ini:
 

Penjelasan: `border-radius: 100%;` ini kalau saya sebut untuk menghilangkan setiap sudut, Jika nilai `100%` dan `50%`. jika di bawah nilai tersebut, maka tidak berbentuk `bulat`.
`width dan height` untuk mengubah ukuran lingkaran.
`background` adalah untuk warna pada lingkaran.


Full Script

dibawah ini adalah script atau source code lengkapnya, kalian bisa mencopy lalu mempastekannya di kodingan kalian.

<!DOCTYPE html>
    <html>
    <head>
        <title>Ahlikode - tutorial membuat lingkaran di html dengan css</title>
    </head>
    <body>

    <style>
        .TutorialCSS{
        width: 200px;
        height: 200px;
        background: #2c2cda;
        border-radius: 20%;
        }
        .TutorialCSS2{
        width: 200px;
        height: 200px;
        margin-top: 50px;
        background: #2cdace;
        border-radius: 100%;
        }
    </style>
    <div class="TutorialCSS"></div>

    <div class="TutorialCSS2"></div>

    </body>
</html>

Oke, sampai disini saja tutorial Cara membuat lingkaran di html dengan css. semoga bermanfaat dan sampai jumpa di artikel berikutnya.

Comments

Popular posts from this blog

Cara Membuat Sidebar Dengan Bootstrap 4

Panduan Membuat Form Login Dengan Bootstrap 5

Cara Membuat Newsletter Di blog Dengan Formspree