RSS

Design

Thu 2009 at 5:47 am by Yustian M

Kebanyakan dari webiste maupun blog yang beredar internet menerapkan style box pada setiap layout css-nya. Dengan demikian suatu keharusan bagi setiap web designer untuk memanfaatkan dan mempercantik website/blog saat menggunakan style box tersebut. Nah salah satu cara untuk membuat style box layout ini nampak lebih menarik dan menambahkan nilai estetika pada design web adalah dengan menggunakan teknik border radius . Pada umumnya code css yang digunakan untuk membuat rounded corners adalah

-moz-border-radius: 3px;

Berasal dari Mozilla dan digunakan pada Firefox

-khtml-border-radius: 3px;

Berasal dari Linux dan digunakan pada Konqueror

-webkit-border-radius: 3px;

Berasal dari Safari dan digunakan pada untuk mac dan windows

border-radius: 3px;

Dan code diatas hanya merupakan spesifikasi dari standart CSS3. Berikut ini beberapa contoh penerapannya:

Image border

Code CSS:

img.border {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#EEEEEE;
border:1px solid #DDDDDD;
padding:5px; }

Code HTML:

<img class="border" src="thumb.jpg" alt="" width="247" height="92" />
Demo Source

Full Rounded Corners

Code CSS:

rounded {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#666666;
color:#FFFFFF;
font-weight:bold;
padding:10px; }

Code HTML:

<div class="rounded"&gt; Text </div>
Demo Source

Border Rounded Corners

Code CSS:

blockquote {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background-color:#F2F2F2;
border:2px solid #555555;
color:#555555;
font-size:140%;
margin:1em 20px;
padding:10px;
text-align:left; }

Code HTML:

<blockquote>text</blockquote>
Demo Source

Half Rounded Corners

Code CSS:

green {
-moz-border-radius-bottomright:8px;
-moz-border-radius-topleft:8px;
background-color:#CCFF99;
border:2px solid #66CC00;
color:#666666;
font-size:120%;
font-weight:bold;
padding:8px 10px; }

Code HTML:

<p class="green">Text</p>
Demo Source

Code di atas hanya berberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius.

Popularity: 14% [?]

Related Posts

, , , , ,

This post was written by:

Yustian M - who has written 61 posts on Yustian Blog.

Artikel ini dapat disebar,dimodifikasi,dicopy dan digunakan sebagaimana semestinya. Dengan menyantumkan nama dan referensi asli. Dan bila ingin berlangganan berita dan artikel diblog ini silahkan Subscribe ke RSS Feed Yustian Blog dan Email Subscription Request

Contact the author

45 Comments For This Post





  1. 10 Jan 2009 11:00 am

    #156
    panca says:

    saya masih ingin belajar membuat web atau blog. boleh dong dibagi ilmu dasar membuat web atau blog.

    Makasih





  2. 07 Feb 2009 6:38 am

    #250
    Mahendura says:

    Q anak Baru Mas.. :oups2:
    Baru Pingin Buat Blog menggunakan Wordpress, Dapet Kesulitan pas Make Custom Field. Mohon Bantuannya Bwat Cara Make N Nempatin Tu Custom Field..
    Terima Kasih Sebelumnya ;)





    • 04 Apr 2009 8:05 am

      #392
      Yustian M says:

      Coba mas lihat Disini Semoga dapat membantu :)





  3. 20 Feb 2009 10:01 am

    #281
    cara membuat website says:

    sy pmula dlm mmbuat web

    artikel mas sgt membantu….

    Terima kasih





    • 04 Apr 2009 8:07 am

      #393
      Yustian M says:

      Semoga apa yang blog ini selalu membantu para pembacanya :ciao:





  4. 20 Feb 2009 2:53 pm

    #283
    ahmad mustaurid says:

    sebelumnya minta maaf nih lagi belajar bikin web, biar tampilan di IE dan fire fox bagus bagaimana caranya????
    terima kasih





    • 04 Apr 2009 8:37 am

      #394
      Yustian M says:

      Kayaknya tidak ada yang perlu saya maafkan karena anda belum berbuat salah pada saya ;) tapi salam kenal dulu yah :) . Biar tampilan di IE dan Firefox nampak sama dan tidak kacau balau banyak trik yang bisa diterapkan tergantung permasalahan tapi yang terpenting ikuti saja standar yang diberikan W3C International Consortium dan tentunya pengalaman yang berbicara disini :)





  5. 06 Mar 2009 1:08 am

    #341
    Hendra says:

    pak yus masih bingung nih apa itu css? kodenya taro dimana ya? boleh kirimin 1 coding lengkapnya ga buat web sederhana jd tau kodenya taro dimana gitu…

    thx





    • 04 Apr 2009 9:01 am

      #395
      Yustian M says:

      CSS adalah Cascading Style Sheets dimana penjelasannya dapat di Baca di Wikipedia Dan untuk menghubungkan CSS dengan file HTML dengan menambahkan sebaris kode berikut diantara tag :

      <link rel=”stylesheet” href=”style.css”>

      Bila ingin contoh lengkapnya silahkan liat di Demo Web yang telah saya buat Disini dan file CSSnya Disni Semoga dapat membantu dalam anda belajar :)





  6. 09 Mar 2009 3:19 pm

    #347
    a2z says:

    kk yuz tolong kasih tau dunk cara menghandle jika ada halaman website yang error atau not_found

    tolong yach

    thx b4 !! :o:





  7. 31 Mar 2009 1:57 am

    #382
    tika says:

    mat kenal admin,blognya bagus dan menarik semangat para blogger,untuk kemajuan besama.tp alexsa saya masih page Rankings 3.menarik untuk di kunjungi.





    • 04 Apr 2009 9:14 am

      #397
      Yustian M says:

      Semangat blogger. :) Saya telah kunjungi celiola.co.cc Kayaknya PR anda masih 0 tinggal tunggu aja mas pasti jadi 3 :) seperti yustian.web.id mendapat PR 3 setelah 4 bulan :) dan Traffic Alexanya celiola.co.cc 1,284,663.





  8. 22 Apr 2009 5:30 pm

    #458
    Alfajri Alwis says:

    Cool! Thanks!





  9. 07 May 2009 6:41 pm

    #494
    fanari says:

    wow keren bro, tapi kayaknya mending nunggu draft CSS3 selesai diadopsi deh :D





    • 08 May 2009 12:51 am

      #497
      Yustian M says:

      Kabarin ya kalau draft CSS3 sudah diadopsi :) Saya tunggu :)





  10. 20 May 2009 12:26 am

    #509
    uwiuw says:

    wah lumayan nih…tips sederhana tp beguna. jadi ucu bentuk tombolnya





  11. 21 May 2009 5:45 pm

    #513
    ari says:

    sore om yus, tolong ajari bikin tampilan judul di header indah hijau kayak gtu dong?heee
    thanks, atau buat tutorialnya dong :pff:





  12. 23 Jun 2009 3:15 pm

    #563
    zoey says:

    boss…gimana caranya membuat target dari artikel ke web..





  13. 03 Jul 2009 11:53 am

    #607
    Nanang says:

    wah, keren nih infonya… saya sudah aplikasikan ke blog saya… :-) thanks





  14. 22 Jul 2009 8:31 am

    #647
    Harie_rasta says:

    Thanks ya…..atas tutornya





  15. 01 Sep 2009 12:50 pm

    #681
    yuya indou says:

    thanks tutorialnya.. :)
    aq emg lg butuh infonya.. :dribble:





  16. 12 Sep 2009 3:40 pm

    #697
    Herpulus D.Simamora says:

    saya mau buat Website apakah anda bisa membuat web buat saya?





    • 12 Sep 2009 8:12 pm

      #707
      Yustian M says:

      Silahkan Anda kirim ke Email yustianblog@gmail.com untuk melakukan pemesanan pembuatan website yang Anda inginkan!





  17. 13 Sep 2009 11:18 pm

    #709
    huda says:

    :pff: wah mkshy za ya kak yus q bisa mendisain blogq dg lbih mudah mskipunq baru ngeblog?





  18. 06 Oct 2009 10:14 am

    #737
    Nanang says:

    wow, it’s work.. keren bgt infonya.. thanks :-)





  19. 26 Oct 2009 3:18 pm

    #773
    reez says:

    wahhh… makasih sharingnya mas…. bermanfaat sekali…





  20. 27 Oct 2009 9:37 pm

    #777
    supri says:

    AMPUN DJ ane ngak ngerti sama sekali…………

    http://mekatronika-tutorial.blogspot.com :dribble:





  21. 20 Nov 2009 3:52 pm

    #818
    Khantry says:

    itu untuk Standar W3 CSS3 ya.. Kalau untuk CSS2.1 masih belum valid ya omm..





  22. 15 Feb 2010 6:50 pm

    #912
    miss dewi says:

    ajarin dunk mas cara bikin template kayak gini… Klo mas buka kursus ane ikut dah yg penting bisa…





  23. 23 Feb 2010 1:07 am

    #916
    fery says:

    saya sangat awam di bidang blog ini, saya buat blog tapi acak acakan. mohon donk saya diajarin pembutan tata letak blog yang bagus…

    thx
    fery





  24. 27 Feb 2010 6:28 am

    #925
    Graha@GDesain says:

    Haha nice info bro, emang kalo pake rounded corner terkesan elegant, web 2.0 banget :)





  25. 05 Apr 2010 10:03 am

    #976
    Dhar says:

    Wah CSS tingkat tinggi nih.. Thanks ya..





  26. 11 Apr 2010 3:31 pm

    #991
    Asha says:

    terima kasih, cool banget coy,….





  27. 22 Jun 2010 8:38 pm

    #1075
    echa says:

    nice info buat echa neh..^^





  28. 04 Jul 2010 5:11 pm

    #1089
    fansmcr says:

    kak yus,saya mau membuat website saya menarik.seperti website kak yus ini..tapi gmbar’a band.. :)
    klo boleh tw,gmana ya cara’a?? :)
    mksih sblum’a
    hhehehe ;)





  29. 01 Aug 2010 8:07 pm

    #1115
    andi says:

    bro…. tolong saya… saya mau promosiin blog… btw, blogmuu keren cuz

    http://forumsurabaya.blogspot.com/
    http://yuwen-info.blogspot.com/





  30. 02 Aug 2010 10:04 am

    #1116
    Panca Wibawa says:

    Thanks untuk tipsnya, sangat berguna sekali buat saya, tapi ada sedikit masalah, di browser firefox terlihat sesuai dengan contohnya, tapi kalo dibuka di IE ga ada effectnya, masih terlihat kotak biasa, ada triknya ga mas?

    btw…thanks a lot!!!





  31. 08 Apr 2011 8:46 am

    #1288
    macbook pro memory upgrade says:

    Thanks duty of the major info. Fully supply obstruction up! I on the undamaged do not commentary on these but I attentiveness you did a creditably ok fail courtyard and I’m clear-cut some people take it the all in all unchangeable





  32. 21 Apr 2011 2:25 pm

    #1301
    ohsiap says:

    gan, ane mau tanya, ane pakai Border Rounded Corners, tapi menggunkan background gardient jadi backgroundnya berupa file .gif
    Itu caranya gimana mengganti background dengan gardient berupa file .gif dan apa nanti bentuknya sama seperti menggunakan background color biasa ??
    Tolong di respon gan.. terimakasih.. :)





  33. 06 Jun 2011 7:50 am

    #1338
    Toyo Widodo says:

    Mantap gan, e… disini ada moderator id-joomla yang koment, berarti ni blog mantap banget. ada tutorial joomla nya gak gan di blog ini? :) :) :) :)





  34. 27 Jun 2011 1:30 pm

    #1356
    Embefemaibe says:

    Superb post ! I will store it in my favorites. thanksss !





  35. 10 Jul 2011 5:33 pm

    #1373
    Asmara Susanto says:

    nice inpoh, k tkp ane





  36. 13 Aug 2011 12:37 am

    #1413
    putra says:

    wah artikelnya bermanfaat , saya minta sarannya untuk http://cakraindah.net/ nih tolong dicek ya… teman2 …
    masih butuh byk pengembangan … terimakasih :D

Leave a Reply

:p 8) :lol: =( :8 ;) :(( :o: :[ :) :D :-| :bloody: :cool: :choler: :love: :oups: :aie: :beurk: :canny: :go: :miam: :ueue: :nose: :oh: :oups2: :prud: :yo: :sadd: :bloody2: :cache: :rose: :sure: :dream: :neo: :yes: :sweat: :kiss: :creve: :what: :pff: :hm: :bobo: :ciao: :dribble: :gene: