Membuat Lingkaran dengan CSS

Ada kalanya di dalam memposting artikel memerlukan gambar lingkaran. Memang blogger sudah menyediakan fasilitas untuk menyisipkan gambar, tetapi perlu diketahui ketika sebuah blog memiliki banyak gambar tentu akan memberatkan saat loading. Sehingga alternatif pilihan lain adalah dengan memanfaatkan kode css untuk menggambar lingkaran.

Cara menggambar lingkaran di dalam posting adalah sebagai berikut:
Langkah awal pertama tentukan ukuran lingkaran (lebar dan tinginya dalam satuan px) misalnya kita akan membuat lingkaran dengan lebar 100px dan tingginya 100px maka kode yang harus disisipkan adalah sebagai berikut:

<div style='border:1px solid #000;width:100px;height:100px;
border-radius:100px;background:#ddd'>
</div>

Sehingga hasilnya seperti di bawah ini:

Keterangan :

• border:1px solid #000 (artinya : lingkaran tersebut bergaris tepi setebal 1 pixel, memiliki tipe garis solid dan berwarna hitam)
• height:100px (artinya lingkaran tersebut tingginya 100 pixel)
• width:100px (artinya lingkaran tersebut lebarnya 100 pixel)
• background: #FE6602 (artinya lingkaran tersebut mempunyai background berwarna oranye)