Aku Punya dot com

Tidak Punya Ide Untuk Menulis

  • Home
  • Kontak
 
Home > Blog > Cara membuat rounded corner box
08
Agu
2009

Cara membuat rounded corner box

Posted by: admin

Cara membuat rounded corner (sudut melengkung) tanpa menggunakan image (gambar).

Agar tampilan website/blog kita menjadi cantik dan lebih menarik, kita dapat membuat css style box dengan sudut melengkung untuk isi konten website/blog kita.

Berikut adalah langkah-langkah mudah untuk membuatnya:

  • Pertama-tama salin dan simpan kode dibawah ini kedalam file CSS website/blog kamu.
  • Salin kode CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    /*Round corner*/
     
    #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
    #xsnazzy h1 {font-size:2.5em; color:#fff;}
    #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
    #xsnazzy p {padding-bottom:0.5em;}
    #xsnazzy h2 {padding-top:0.5em;}
    #xsnazzy {background: transparent; margin:0px;}
     
    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#FFF; border-left:1px solid #CCC; border-right:1px solid #CCC;}
    .xb1 {margin:0 5px; background:#CCC;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
     
    .xboxcontent {display:block; background:#FFF; border:0 solid #CCC; border-width:0 1px; padding:10px;}
  • Kemudian salin dan tempel kode dibawah ini kedalam template website/blog kamu.
  • Salin kode DIV
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <div id="xsnazzy">
    <b class="xtop"></b><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b>
    <div class="xboxcontent">
     
    Isi konten website/blog kamu disini
     
    </div>
    <b class="xbottom"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
    </div>

    Kode tersebut berfungsi dengan baik pada Internet Explorer, Mozilla Firefox, Opera dan Chrome.
    Selamat mencoba!


    memuat halaman
    Reload
    «
    »
    iklan

    12 Komentar

    Blog, CSS

    Postingan yang lain:
    • Cara menghilangkan kode analytic 000webhost
    • Cara menghasilkan uang di internet
    • Tukar link
    • Blog gratis dengan domain dot com
    • Kode emoticon Wordpress

    Ada 12 komentar di “Cara membuat rounded corner box”

    Tulis komentar
    Komentar dari valya:
    Dari IP: 64.255.180.89
    Tanggal 8 Desember 2009 jam 7:36 am

    G ketemu gan.. kode css round cornernya…
    trus peletakan kode di mana neeh…numpang promo pulsa murah ya.. hehehe…;)

    Balas komentar

    Komentar dari admin:
    Dari IP: 64.255.180.195
    Tanggal 8 Desember 2009 jam 8:41 am

    masa gak ketemu? kan ada diatas..

    Balas komentar

    Komentar dari Igun gunawan:
    Dari IP: 120.160.209.23
    Tanggal 23 April 2010 jam 5:03 am

    mantabs bro manfaat sekali nih …

    Balas komentar

    Komentar dari paketdigital:
    Dari IP: 116.254.97.3
    Tanggal 10 Mei 2010 jam 5:20 pm

    thank a lot dari dulu nyari artikel ini baru ketemu di sini. Langsung aku coba nih. moga2 bisa :grin:

    Balas komentar

    Komentar dari david:
    Dari IP: 125.166.251.42
    Tanggal 8 November 2010 jam 12:30 am

    nice tips bro!!!

    Balas komentar

    Komentar dari kabela:
    Dari IP: 223.255.229.67
    Tanggal 27 Mei 2011 jam 4:08 pm

    tulisannya dan latar belakang belum maching kawan, jadi gak jelas kalau di baca. trims

    Balas komentar

    Balasan dari admin:
    Dari IP: 110.139.124.14
    Tanggal 27 Mei 2011 jam 4:58 pm

    makasih masukannya,,, nanti themesnya aku ganti klo ada waktu,, ;-)

    Balas komentar

    Komentar dari CyberGoBlog:
    Dari IP: 141.0.9.143
    Tanggal 24 September 2011 jam 9:52 pm

    Thanks gan…

    Balas komentar

    Komentar dari karyoto:
    Dari IP: 110.138.77.248
    Tanggal 24 September 2011 jam 10:32 pm

    makasih nih tutorialnya nyari2 eh ketemu web ini thx mas admin

    Balas komentar

    Balasan dari admin:
    Dari IP: 141.0.8.246
    Tanggal 24 September 2011 jam 11:50 pm

    ya, sama2.. makasih kunjungannya.. :cool:

    Balas komentar

    Komentar dari rendi:
    Dari IP: 82.145.208.178
    Tanggal 7 Desember 2011 jam 10:29 am

    kalo buat postingan di wen.ru bisa gak?

    Balas komentar

    Balasan dari admin:
    Dari IP: 141.0.8.232
    Tanggal 7 Desember 2011 jam 1:23 pm

    klo situs wen.ru memperbolehkan utk edit html, bisa langsung dicoba triknya.

    utk membuat sudut lengkung modern dgn css3 bisa dilihat dihalaman ini >> sudut lengkung css3

    Balas komentar

    Tulis Komentar


    website / blog

    Komentar:

    Emoticon
    Emoticon:
    X
    icon_smile.gif icon_wink.gif icon_neutral.gif icon_mad.gif icon_wc.gif icon_uhuk.gif icon_twisted.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_puyeng.gif icon_pliss.gif icon_payah.gif icon_lidah.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_kencing.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_dead.gif icon_cry.gif icon_cool.gif icon_bom.gif icon_bisik-bisik.gif icon_ayolah.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

    Batalkan balasan
     
      CO.CC Free Domain
    •     Komentar terbaru

      • zenald: lumayan tambah ilmu ane yang d #
      • zaara: hmmmm....bngung #
      • Cyntaelistya: bisa \(^o^)/ #
      • angel: subhanallah... #
      • all: good book. #
      • Arwiebowo: wes, langsung jadi bos.. suwun #
      • theodorewilliammuntu: saya mau ganti pw #
      • teddyrachel: bingung banget #
      • merdana: iya karna ada para chiter (pro #
      • Olvie: Maksih infonya #
    •     Kategori

      • Adsense
      • Aneh
      • Biografi
      • Blog
      • Cewek
      • CSS
      • CSS3
      • Dofollow
      • DVD
      • Emoticon
      • Facebook
      • Game
      • Google
      • Gratis
      • Hiburan
      • Javascript
      • Kamus Online
      • Kesehatan
      • Kiamat
      • Kids
      • Komik
      • Lucu
      • Menu Bulan Puasa
      • Mp3
      • PHP
      • Rank
      • Resep
      • Search Engine
      • SEO
      • Sitemap
      • Story
      • Tak Berkategori
      • Tak Penting
      • Tips
      • Tips trik blog
      • Traveling
      • Twitter
      • Wedding
      • Wordpress
      • Youtube
    •     Arsip

      • Januari 2012
      • Desember 2011
      • November 2011
      • Oktober 2011
      • September 2011
      • Agustus 2011
      • Juli 2011
      • Juni 2011
      • Mei 2011
      • April 2011
      • Maret 2011
      • Februari 2011
      • Januari 2011
      • Desember 2010
      • November 2010
      • Oktober 2010
      • September 2010
      • Agustus 2010
      • Juli 2010
      • Juni 2010
      • Mei 2010
      • April 2010
      • Maret 2010
      • Februari 2010
      • Januari 2010
      • Desember 2009
      • November 2009
      • Oktober 2009
      • September 2009
      • Agustus 2009
      • Juli 2009
      • Juni 2009
      • Mei 2009
      Adsense Indonesia
      ...
        Page: /cara-membuat-rounded-corner-box.html : Nipple Piercings
        Test Link 2
        Test Link 3

    Aku Punya dot com © 2009 - 2012
    Powered by WordPress
    Best viewed in Firefox, Opera, and Chrome at 1280 x 960 screen resolutions

    Feed  |  Sitemap  |  Recent Posts
    Tukar Link  |  Pasang Banner  |  Kontak

    29 queries. 0,935 seconds

    Toolbar
    tulis komentar
         
    12 komentar
    Komentar 12
    kembali ke bawah
    Bawah
    kembali ke atas
    Atas
    Games
  • »  Game Puzzle
  • »  Game Tetris
  • Game Puzzle  
     
    Game Tetris  
     
    Shoutbox
    Shoutbox  

     
    Suka
    Aku Punya fans  
     
    Pencarian
    memuat ...