Border-Radius : Membuat Garis Lengkung Dengan CSS

border-radius Sebelumnya saya pernah membahas tutorial membuat garis lengkung pada kolom atau curve corner. Mungkin kurang lengkap dan masih banyak yang menanyakan hal ini kepada saya. Sayangnya kode border-radius ini tidak support dengan internet explorer. Jika sobat suka menggunakan ie sebagai browser utama, sobat tidak akan bisa merasakan hebatnya css untuk garis lengkung ini.

 

Saya akan berikan contoh pengunaan border-radius pada tulisan saja, jika ingin menambahkan pada sidebar atau kotak postingan juga bisa. Berikut ini syntax untuk border-radius dan beberapa contoh penulisan di blog menggunakan kode border-radius.

 

Syntax untuk border-radius

 

Mozilla Equivalent Browser Opera 10.5 Webkit Equivalent (Safari 3)
-moz-border-radius-topright border-top-right-radius -webkit-border-top-right-radius
-moz-border-radius-bottomright border-bottom-right-radius -webkit-border-bottom-right-radius
-moz-border-radius-bottomleft border-bottom-left-radius -webkit-border-bottom-left-radius
-moz-border-radius-topleft border-top-left-radius -webkit-border-top-left-radius
-moz-border-radius border-radius -webkit-border-radius

 

 

-Moz-Border-Radius (Untuk Mozilla)

 

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

-Webkit-Border-Radius (Untuk Safari)

 

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

 

Border-Radius (Support Opera 10.5)

 

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

 

 

Jika ingin membuatnya pada sidebar blog, silahkan sobat aplikasikan kode css sidebar blog sobat dengan kode diatas. Caranya hanya menambahkan kode yang saya tebalkan diatas kedalam css sidebar blog sobat.

 

Semoga bermanfaat ya.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

19 comments

27 April 2010 03.31

Mantap mas infonya...good blog and good post....!!! lams knal dari chugy ni mas. Ijin tukeran link mas y. link blog ini dah di pasang di www.chugygogog.blogspot.com Dngan Nama Miscah Blog. Komfirmasi mas y di blog saya trima kasih.?

29 April 2010 00.13

jalan-jalan malam, tapi jangan lupa kunjungi juga:

http://trojandecoder.blogspot.com/

28 Januari 2011 03.33

thx bnged ni kang..
ane praktekin y kang..

12 Februari 2011 12.41

mantap sob infonya...

30 April 2011 14.10

mantab banget

27 Juni 2011 11.54

Bagaimana dengan tabel,. release segera ya!,. di tunggu artikel tentang radius di tabel,. ok ;)

kalo border radius utk menambah kolom footer kodenya bgmn gan?

wah hasilnya bagus2 jadinya, mau nyoba juga ah...makasih ya mas atas tutorialnya..makasih ya mas atas tutorialnya

25 Agustus 2011 14.47

wah keren nih

thanks for the sharing ..
ini bisa di pake untuk autocad gak si ?

5 November 2011 20.37

Blogwalking..Gan..

5 November 2011 22.55

Bismillah, dicoba ya mas Doddy..

15 Januari 2012 14.45

thks infonya sob.

29 Januari 2012 02.58

Nah, ini dia yang saya paling susah mengerti.
Saya liat template2 lain, menu navigasi horizontalnya melengkung ketika saya buka melalui browser opera mini hp, tetapi punya saya tidak demikian.
Bagaimana solusinya bos???

3 Februari 2012 23.56

ini yg sedang ane cari gan, thx

9 April 2012 21.24

makasi gan ane baru nyari langsung ketemu sama blognya agan, pokoknya keren abiz simpel jelas dan mantap..he.he.heh

18 Mei 2012 15.38

weww,,keyeenn euy.thanks kang infonya :D

11 Januari 2013 01.34

tq sob infonya ini yg saya cari

Poskan Komentar

Reader Community

Recent Comments