CSS3 Border-radius dan css -moz-border-radius

border-radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html

jikalaupun saya akan mati esok hari, saya akan tetap bahagia hari ini

border-radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html

Last Modif at July 8th, 2011

sekedar info, sebelum border radius css3 belum support di beberapa browser. firefox terlebih dahulu membuat versi mereka sendiri yaituh -moz-border-radius. yups -moz-border-radius dan border-radius itu sama.

dulunya saya sudah sering menggunakan -moz-border-radius, sekarang saya masih menggunakan -moz-border-radius, ya walaupun versi rekomendasinya sudah ada(border-radius) tapi saya jarang menggunakanya.

sampai detik ini(9 juni 2010) saya lebih senang menggunakan -moz-border-raidius, yah walaupun -moz-border-radius itu hanya aktif di mozila firefox. namun saya yakin suatu saat pangsa IE akan drop ke kisaran 10-30%, sedangkan mozilla firefox akan terus tumbuh dikisaran 40-50%. menurut info yang saya dapat, IE(internet exploler) masih menjadi browser yang paling banyak digunakan, anehnya IE6 menyumbang sekitar 4% pengguna dunia. iih, bisa banyangin ngga tampilan di IE6? sekarang kan IE versi terbru adalah IE8, nah kenapa ngga updete versi 8?
ahh, lupakan mengenai berowser, back to topick!

apa itu border-radius?

border-radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html!

biasanya jika kita memberi nilai width dan height pada tag html, maka unjungnya akan membentuk sudut 90% atau persegi. nah, dengan border-radius ini kita bisa membuat lengkungan di sudut tadi!

value border-radius adalah

  • angka() dalam px, em, pt, atau
  • percent, atau
  • shouthand || angka dalam px, em, pt(spasi)angka dalam px, em, pt
  • shouthand || angka dalam px, em, pt(spasi)angka dalam px, em, pt(spasi)angka dalam px, em, pt
  • shouthand || angka dalam px, em, pt(spasi)angka dalam px, em, pt(spasi)angka dalam px, em, pt(spasi)angka dalam px, em, pt
  • pilih salah satu

contoh 1

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;border-radius:30px;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, ngga active di browser versi lama

contoh 2

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;border-radius:40%;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, ngga active di browser versi lama

untuk penerapan lainya, kita akan menggunakan -moz-border-radius, karena -moz-border-radius dan border-radius ini fungsinya, hanya saja border-radius belum bisa deterapka di semua browser sadangkan -moz-border-radius ini hanyak aktif di mozilla firefox. berikut

apa itu -moz-border-radius?

property -moz-border-radius ini sama dengan border-radius pada css3, hanya saja -moz-border-radius ini hanya aktif di firefox v3+, sedikit berbeda dengan border-radius, pada -moz-border-radius ini kita memiliki bebepara opsi property antara lain

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright
  • -moz-border-radius

sedangkan value atau nilainya sama dengan border-radius, berikut contoh tampilan dan kode/markup yang ditarapkan dalam inline style!

-moz-border-radius

fungsinya untuk membuat lengkungan di setiap sudut

contoh code

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;-moz-border-radius:30px;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, hanya active di firefox v3+

-moz-border-radius-topleft

funsinya untuk membuat lengkungan di sudut kiri atas

contoh kode/markup

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;-moz-border-radius-topleft:30%;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, hanya active di firefox v3+

-moz-border-radius-topright

funsinya untuk membuat lengkungan di sudut kanan atas

contoh code/markup

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;-moz-border-radius-topright:30px;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, hanya active di firefox v3+

-moz-border-radius-bottomleft

funsinya untuk membuat lengkungan di sudut kiri bawah

contoh code/markup

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;-moz-border-radius-bottomleft:30px;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, hanya active di firefox v3+

-moz-border-radius-bottomright

funsinya untuk membuat lengkungan di sudut kanan bawah

contoh code/markup

<div style="padding:10px;border:4px double lime;margin:auto;padding:auto;background-color:blue;width:300px;height:300px;-moz-border-radius-bottomright:30px;">
<p>perhatikan sudut</p>
</div>

jadinya seperti ini

perhatikan sudut, hanya active di firefox v3+

shouthand -moz-border-radius
-moz-border-radius ini dilengkapi dengan shouthand,tahu kan apa itu shouthand?
dengan shout ini kita ngga perlu menulisa stylenya panjang-panjang, jadi kita hanya perlu menulis stylenya seperti ini(dalam px)

  • -moz-border-radius:30px/*untuk membuat lengkungan masing-masing 30px disetiap sudut*/
  • -moz-border-radius:30px 20px;/*untuk membuat lengkungan kiri-atas dan kanan bawah sebesar 30px, serta 20px untuk kanan-atas dan kiri bawah
  • -moz-border-radius:30px 20px 10px;/*untuk membuat lengkungan 30px di kiri-atas, masing-masing 20px untuk kanan-atas dan kiri bawah serta 10px untuk kanan bawah*/
  • -moz-border-radius:10px 20px 30px 40px/*untuk membuat lengkungan masing-masing 10px untuk kiri atas, 20px kana-atas, 30px untuk kiri bawah, dan 40px untuk kanan bawah

asik kan, css itu!

untuk contoh shouthad berikut penerapan

-moz-border-radius dalam internal style

pada beberapa contoh diatas, kita memperaktekanya dalam inline style. untuk contoh penarapan dalam internal styele, sebagai berikut!

<html>
<head>
<title>text-decoration underline</title>
<style type="text/css">
.untuk-border-radius{
margin:20px;
padding:10px;
border:4px double lime;
padding:30px;
background-color:blue;
width:300px;
height:300px;
color:red;
font-size:30px;
}
#contoh1{
-moz-border-radius:20px;
}
#contoh2{
-moz-border-radius:10px 20px;
}
#contoh3{
-moz-border-radius:10px 20px 30px;
}
#contoh4{
-moz-border-radius:10px 20px 30px 40px;
}
#contoh5{
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-bottomright:50px;
}
#contoh6{
-moz-border-radius-topleft:40px;
-moz-border-radius-bottomright:50px;
}
#contoh7{
-moz-border-radius-topleft:50%;
-moz-border-radius-bottomright:50%;
}
#contoh8{
border-radius:50%;
}
#contoh9{
border-radius:50% 30%;
}
</style>
</head>
<body>
<div id="contoh1" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh2" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh3" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh4" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh5" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh6" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh7" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh8" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<div id="contoh9" class="untuk-border-radius"><p>perhatikan sudut</p> </div>
<!--// salam
www.indaam.net //-->
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama border-radus.htm
  • jalankan menggunakan firefox!

khusus valuenya, saya lebih sering menggunakan px atau % sedangkan pt, em ngga pernah
semoga bermafaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

8 thoughts on “CSS3 Border-radius dan css -moz-border-radius”

  1. amir says:

    mantap penjelasan nya mas……
    makasi mas….

  2. andika says:

    lalu bagaimana cara menanggulangi border-radius di IE mas?
    saya dapat referensi ditambah file border-radius.htc, sehingga di css-nya ditambah atribut behavior:url(border-radius.htc), tapi hasilnya ga berfungsi…

    ada saran-nya pak???

  3. indam says:

    Sebenarnya saya sudah ngga niat membahas ini.
    Yang saya tahu, ie 8 dan dibawahnya emang ngga support border radius. Tapi, jika ie9(BETA), saya rasa sudah support ‘walaupun saya belum install ie9′ + win9.

  4. Er'end says:

    Banyak singgah disini,ijin belajar.Salam kenal and makasih infonya.Happy blogging.

  5. meli oktavia says:

    sangat dimengerti. Trimakasih…

  6. astri says:

    makasih infonya..sangat bermanfaat :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-