earth

Guestbook

/* Iklan google ads */
Pada tulisan terdahulu saya memaparkan tentang bagaimana cara membuat sebuah bingkai atau kotak untuk sebuah tulisan, baik yang menggunakan border, overflow atau textarea. Nah, pada tulisan kali ini saya masih akan membahas seputar bingkai, hanya saja kali ini tentang bagaimana membuat bingkai yang ujungnya lancip.

Pada dasarnya perintah yang digunakan tidak jauh berbeda dengan perintah border, overflow atau textarea, seperti yang sudah saya kemukakan pada tulisan terdahulu. Hanya saja untuk membuak bingkai tersebut menjadi lancip perlu ditambahkan perintah -moz-border-radius pada perintah-perintah tadi.
Membuat border dan overflow lancip
Untuk membuat border dan overflow lancip kamu tinggal menambahkan perintah -moz-border-radius: ukuranpx;, seperti berikut:
<div style="border: 1px solid #CCC; -moz-border-radius: 10px; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#FBFBEE; text-align: left;">Tulisan yang diinginkan</div>
Pada contoh di atas ukuran moz border radius-nya adalah 10px. Dengan margin atas-bawah 10px dan kiri-kanan 0px. Padding atas-kanan-bawah-kiri 10px. Kamu dapat mengubahnya sesuai dengan keinginan.
Membuat textarea lancip
Untuk membuat kotak textarea lancip kamu tinggal menambahkan perintah "style=-moz-border-radius: ukuranpx;", seperti berikut:
<textarea rows="5" cols="50" style="-moz-border-radius: 10px;">Tulisan yang diinginkan</textarea>
Ukuran baris (rows), kolom (cols), dan moz border radius-nya dapat kamu ubah sesuai dengan keinginan.
Membuat kotak lancip di bagian tertentu
Jika kamu menginginkan yang lancipnya hanya di bagian tertentu saja, kamu dapat menambahkan perintah-perintah berikut:
-moz-border-radius-topleft: ukuranpx; (lancip kiri atas)
-moz-border-radius-topright: ukuranpx; (lancip kanan atas)
-moz-border-radius-bottomleft: ukuranpx; (lancip kiri bawah)
-moz-border-radius-bottomright: ukuranpx; (lancip kanan bawah)
Kamu juga dapat menabahkan perintah moz border radius ini pada kode CSS template blog kamu. Caranya seperti pada perintah border dan overflow di atas, atau seperti pada perintah kotak lancip di bagian tertentu jika kamu hanya menginginkan bagian-bagian tertentu saja yang lancipnya.

Nah, segitu aja brow, selamat mencoba....
Catatan Tambahan:
Sayangnya tidak semua browser mendukung perintah moz border radius ini, seperti Google Chrome, Opera, Apple Safari, dan Internet Explorer (IE). Jadinya kotak lancip ini baru bisa terlihat jika menggunakan browser Firefox dan Flock saja.
Namun jika kamu ingin browser lain men-support border radius, silahkan baca artikel ini.

  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    7 komentar

    Dengan si -moz-border-radius, kotak kotak ajaib kelihatannya jd kagak kaku ya. sob kalo buat kaya di tab beranda, posts feed... daftar isi gmana caanya... alus kaya 3Dimensi

    12 Oktober 2009 21.44  

    Selalu ada ilmu baru di sini, nuhun nya Kang...

    15 Oktober 2009 21.02  

    blognya aku bookmark ah, byk info menarik disini.. jadi aku pasti byk belajar dr mas.. tx..

    18 Oktober 2009 22.04  

    memang kebetulan ini yang saya cari. udah praktek dan ALLHAMDULLILAH sukses
    memang sangat bermanfaat bagi pemula yang sedang merintis blog


    terimakasih sudah mau berbagi.

    NB : jika sempat mampir ya, satu kali klik/ kunjungan sangat berharga buat saya

    13 Desember 2009 23.38  

    Good info... Hatur tengkiw sobat. Langsung ke TKP nih buat nyobain

    5 Januari 2010 15.20  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler