Rounded Border- Membuat Border Bersudut Bundar

Memang menyenangkan jika rekan-rekan mampu menguasai kode-kode CSS untuk menentukan letak dan tampilan/layout template blog. Kadang ada rasa bangga jika dapat mengutak atik tampilan blog yang tentu membuat template kelihatan berbeda dengan blog lainnya.

Seperti memasang border di body atau pinggir artikel agar tampilan blog menjadi lebih baik. Dalam keadaan default, border akan memiliki sudut lancip seperti ini:


gb no.1. border sudut lancip


Lalu bagaimana agar sudut border tidak lancip tapi bundar/rounded seperti ini:



gb no.2. border sudut bundar

Ternyata mudah membuat sudut border menjadi bundar/rounded seperti gambar no.2, rekan-rekan hanya perlu menambahkan kode setelah kode border. Berikut ini langkahnya:

1. Login ke dasbor blogger.com

2. Pilih Tata letak/layout -> Edit HTML, centang "Expand Template Widget"

3. Lalu cari kode bordernya. Misal kode border sebelumnya seperti ini:

  • border:1px solid #808080;
4. Tambahkan kode dibawah ini setelah kode diatas:

  • -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
5. Penempatannya bisa dibawah atau disamping kode border:1px solid #808080; , sehingga setelah digabung menjadi seperti ini:

  • border:1px solid #808080;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
6. Untuk menambah bundar sudut border, rekan hanya perlu menambah nilai radiusnya dan begitu sebaliknya.

7. Simpan template.

Terakhir lihat hasilnya di browser mozilla firefox, karena trik ini baru berhasil jika menggunakan firefox untuk membuka blog. Sementara jika dibuka di browser IE, Opera dan Google chrome sudut border masih lancip. Selamat mencoba.



5 komentar:

Muhammad Qori said...

waduh rumit sekali kode css itu ya?

gak ngerti bang...

tapi oke juga tuh tipsnya.

Blog Blogger Gratis said...

tips baru lagi nih, kapan2 cobain ah... Thanks

agususilo said...

Dah tak coba dan berhasil.Thx
o ya gimana ya caranya agar yang rounded pada kotak postingan dan sidebarnya mas?

adedosol said...

@Agussusilo maaf mungkin lain kali saya posting trima ksh sdh mampir

Arsitek said...

boleh di coba ni gaannn

Post a Comment

Silahkan memberi komentar, saran, kritik atau masukan tentang artikel atau blog ini
Do not insert a link on comment box or you will be considered a spammer

 
Seo marketing © 2010 | Designed by Chica Blogger | Back to top