Cara Membuat Garis Lengkung Pada Border



Border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html. Nah pada border ini kita akan mempelajari cara membuat garis lengkung pada border. Garis ini sangat bagus yang menjadikan blog kita tampak lebih indah dan berkesan.

Garis lengkung ini otomatis sudah bekerja dimana saja, di sidebar, footer, header, dan juga bagian posting. Contohnya bisa sobat lihat pada gambar di bawah ini:


Atau

Berikut bagian-bagiannya kode CSSnya:

  • -moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
  • -moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
  • -moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
  • -moz-border-radius-topright => ini untuk garis melengkung kanan atas
  • -moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas
Bagaimana? Tertarik untuk membuatnya? Silahkan ikuti langkah di bawah ini:

1. Login ke blogger dengan account anda.Lalu ke TATA LETAK –> EDIT HTML.
2. Cari kode h2.date-header { , Lalu letakkan kode di bawah ini setelah kode tersebut.
border-left:3px solid #c0c0c0;
border-right:3px solid #c0c0c0;
border-top:3px solid #c0c0c0;
border-bottom:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
3. Cari kode .post-body { , Lalu letakkan kode di bawah ini setelah kode tersebut.
border-right:3px solid #c0c0c0;
border-left:3px solid #c0c0c0;
4. Sudah..??,sekarang cari kode .post-footer { , Lalu tambahkan kode di bawah ini setelah kode tersebut.
  border-left:3px solid #c0c0c0;
  border-right:3px solid #c0c0c0;
  border-top:0px solid #c0c0c0;
  border-bottom:3px solid #c0c0c0;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;
5. Simpan kerja anda.
6. Nikmati hasil pekerjaan anda barusan dengan mengklik tab Lihat Template.. sekarang kolom posting anda sudah lebih menarik bukan..??^^
(Kode berwarna hijau adalah warna dari border.Pada contoh ini,saya memakai kode warna abu-abu. Anda dapat mengkreasikan warna anda sendiri. (baca: Tabel dan Kode Warna))

Untuk mengganti border pada kolom sidebar,anda hanya perlu menempatkan kode dibawah ini setelah kode .sidebar .widget {
border:1px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px
  • Selesai deh… mudah kan..? Happy 

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Garis Lengkung Pada Border dan anda bisa menemukan artikel Cara Membuat Garis Lengkung Pada Border ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-garis-lengkung-pada-border.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Garis Lengkung Pada Border ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Garis Lengkung Pada Border sumbernya.


16 comments

aneh unik gokil April 19, 2011 at 1:29 PM

nice info :)

Reply delete
bejoshare.com April 19, 2011 at 1:56 PM

walaupun blog ente nofollow, ane kasih komment. nice post.

Reply delete
Deny Arya Wiranata April 19, 2011 at 3:28 PM

@aneh unik gokil
OK Sob
@bejoshare.com
Blog yang berkomentar tidak selalu dofollow sob. Itu bisa saja nofollow karena kualitas postingnya. Lengkapnya bisa sobat lihat disini

Reply delete
XpVistaSe7en May 29, 2011 at 3:55 PM

Mantap !!!

Reply delete
Deny Arya Wiranata May 29, 2011 at 5:22 PM
aNaK KoS EnTerTaiNmEnT June 12, 2011 at 2:34 AM

mantap..

Reply delete
Mas Koisine August 2, 2011 at 8:52 PM

Thanks sob, saya mau coba nih sepertinya menarik dipraktekan di blogku dengan memasang border lengkungan sidebar.

Terima kasih sob.

Kunjungan baliknya ditunggu. hehehe :)

Reply delete
Asmara Susanto August 31, 2011 at 10:38 AM

bermanfaat mas, makasi atas petunjuk kode2ny :D

Reply delete
Klik Menarik September 11, 2011 at 11:13 AM

Tutorialnya Mantap gan !!
Terima Kasih Banyak !!

Reply delete
info toko surya62 September 20, 2011 at 1:46 AM

info bagus sekali, makasih ya... kunjungi aku di http://s-surya62.blogspot.com/

Reply delete
rizkyfadhlillah April 28, 2012 at 11:29 PM

gan, gmna cara ngepasin sisi nya?
pnya ane kurang besar border nya

Reply delete
unikgaul.com September 9, 2012 at 2:06 PM

mantap gan !ini yang ane cari cari, akhirnya berhasil. makasih sobat !

Reply delete
Udendeen September 11, 2012 at 8:30 PM

Nice tips. Trimakasih tutorialnya.... :)

Reply delete
Desain Company Profile July 13, 2013 at 9:19 AM

Terimakasih banyak atas informasinya

Reply delete
download-tema-windows-7.html November 7, 2013 at 3:29 PM

mantap sob, ditunggu komentnya

Reply delete
Siti Zulikah June 10, 2014 at 5:17 PM
This comment has been removed by the author. Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors