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.