Cara Membuat Lengkungan dan Lingkaran dengan border-radius

Assalamu'alaikum Warahmatullahi Wabarakatuh..
    Di postingan kali ini kita akan membahas salah satu fitur baru dari CSS3 yaitu border-radius. Apa itu border-radius dan bagaimana cara menggunakannya? Jadi border-radius befungsi untuk membuat sudut dari suatu objek di HTML menjadi agak melengkung (termasuk menjadi sebuah lingkaran). Perlu diingat, efek ini hanya akan bisa dilihat pada browser-browser keluaran baru yang sudah mendukung CSS3. Jadi teringat beberapa waktu yang lalu, kalau pas mau bikin lingkaran atau lengkungan teh pasti harus bikin gambar secara manual, yaa cara itu sebetulnya sah-sah saja dalam dunia web design. Tapi seiring berjalannya waktu, sampai saat itu saya nyasar ke w3schools.com dan menemukan fitur baru dari CSS3 ini. Ternyata cara ini sangat mudah, cepat, dan bisa menghemat kuota pengguna karena ukurannya hanya beberapa bytes saja. Bayangkan jika kita harus menggunakan teknik membuat gambar tadi, udah lama, ribet lagi. Oke, langsung saja kita ke pembahasan.
     Jadi syntax yang paling umum untuk menggunakan border-radius adalah sebagai berikut:
border-radius: kiriatas kananatas kananbawah kiribawah;
Tapi jika semua sudut nilai-nya sama, kita bisa menggunakan syntax dibawah:
border-radius: semuasudut;
     Kita bisa mengisi nilai-nya menggunakan satuan pixel (px) ataupun persen (%). Tapi saya lebih sering menggunakan satuan pixel, satuan persen hanya saya gunakan untuk membuat lingkaran (cara membuat lingkaran akan dibahas dibawah). Contoh sederhana-nya seperti ini:

 Azis Hapidin

Sciptnya:
<div style="width:200px;background-color:#1D8DD7;border-radius: 10px 50px 50px 10px;">
<h1> Azis Hapidin</h1>
</div>
      Script diatas menunjukan bahwa nilai lengkungan untuk setiap sudutnya adalah: 10px untuk sudut Kiri Atas, 50px untuk sudut Kanan Atas, 50px untuk sudut Kanan Bawah, dan 10px untuk Kiri Bawah.
      Oh iya, jika nilai dari semua lengkungan itu setengah atau lebih dari lebar dan tinggi suatu persegi, maka akan menghasilkan sebuah lingkaran. Contohnya seperti ini:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:80px;"></div>
      Karena semua sudut nilai lengkungannya lebih dari setengah lebar dan tingginya, maka akan menghasilkan:
Sebagai alternatif lain untuk membuat lingkaran, kita bisa mengisi nilai border-radius nya dengan 50% atau lebih besar lagi. Silahkan coba-coba modifikasi script diatas biar lebih faham.

Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:15px;"></div>


Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:5px 25px;"></div>


Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:25px 5px;"></div>



Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:5px 5px 50% 100%;"></div>



Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:50% 100%;"></div>



Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:125px 125px 30px 30px;"></div>



Scriptnya:
<div style="width:125px;height:125px;background-color:#1D8DD7;border-radius:100% 50%;"></div>



Scriptnya:
<div style="width:200px;height:125px;background-color:#1D8DD7;border-radius:50%"></div>



Scriptnya:
<div style="width:125px;height:200px;background-color:#1D8DD7;border-radius:50%"></div>


Script ini juga bisa digunakan pada gambar:



Tanpa efek border-radius
Scriptnya:

<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border-radius:50%;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border: 5px solid #1D8DD7;border-radius:50%;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border: 5px solid #1D8DD7;border-radius:50px 50px 10px 10px;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border: 5px solid #1D8DD7;border-radius:10px 10px 50px 50px;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border: 5px solid #1D8DD7;border-radius:100% 50%;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-FugVl5VyrDw/VaL2LS7-Y_I/AAAAAAAACTg/LVf1jWBgTUY/s1600/gambar.jpg" style="width:150px;height:150px;border: 5px solid #1D8DD7;border-radius:50% 100%;">



Scriptnya:
<img src="http://4.bp.blogspot.com/-GuNK7h9PpbA/VaL2NP3wPhI/AAAAAAAACTo/nfznafAapkM/s1600/gambar2.jpg" style="width:250px;border: 5px solid #1D8DD7;border-radius:50%;">

Mudah kan? Sekian dari saya, semoga bermanfaat..
Kalau ada yang belum dimengerti silahkan untuk bertanya di kolom komentar..
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

3 komentar

Nampaknya yang lingkaran tidak ada. Atu mungkin di browserku gak jalan yah..

But kereen lah...
Aku juga lagi belajar css buat memperbaiki blog ku...

Tapi di saya bisa ko gan, ngomong-ngomong itu agan browsernya pake apa? @@,
Makasih kunjungannya ya gan :)

Iya kayanya itu browsernya , di ane bisa kok :p


EmoticonEmoticon