Cara Membuat Rounded Corner

Memang asyik bila kita sudah berhadapan dengan kode css, sebab dengan kode-kode css kita bisa buat efek apa saja seperti :  efek rounded corner, text shadow, transform rotate, selector, dan lain-lain. Dan semua itu masih banyak yang belum kita coba. Tapi tak mengapa, masih banyak waktu kita untuk menjelajahi kode css dan efek-efeknya.

OK...!!! Kali ini kita akan mencoba untuk membuat sebuah  kotak dengan sudut tumpul atau sering juga di sebut dengan  rounded corner. Rounded Corner adalah sebuah efek melengkungkan sebuah garis (border) pada sebuah elemen di web, tentunya hal ini untuk memudahkan kita dalam mendesain web ataupun blog.


Apalagi Rounded Corner ini diberi efek background warna gradasi, pasti akan tambah indah desain web atau blog kita. Tapi untuk efek gradasi akan saya jelaskan pada postingan berikutnya.

Perhatikan sudut-sudut dari garis dibawah ini :


DISINI
TEKS ANDA

DISINI
TEKS ANDA

DISINI
TEKS ANDA


Keterangan :
Warna bisa diubah sesuai selera
(-moz-border) dan (webkit-border) bisa anda rubah, semakin kecil nilai "px"nya akan semakin meruncing sudutnya,dan sebaliknya, semakin besar nilai "px"nya akan semakin tumpul sudutnya.

Berikut kode css dari bentuk di atas adalah : 


<div style="border:#1589FF 3px solid; -moz-border-radius:10px; -webkit-border-radius:10px;">
    DISINI TEKS ANDA</div>


Ingat saran saya :
Gunakan browser versi terbaru yang support CSS3 dan jangan gunakan Internet Explorer, misalnya browser Mozilla Firefox, agar trik ini bisa tampil.

Jadi deh.....
Silahkan anda mencoba,

Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu lho.....Terima kasih.


Silahkan anda lihat yang ini juga :



Mohon bantuannya untuk memperbaiki blog ini.


Jika Anda menemukan hal yang kurang berkenan atau tutorial yang belum bisa anda aplikasikan, Silahkan hubungi saya dengan menggunakan fasilitas Layanan umum. Dan saya akan selalu berusaha membalas keluhan anda serta memperbaiki kesalahan seceparnya.
Dan apabila anda merasa artikel /atau tutorial ini bermanfaat, silahkan bagikan ke teman Anda lewat tombol-tombol di disebelah kanan atas pada halaman ini...Terima kasih.

2 komentar:

  1. duh ane malah bingung nih gan

    BalasHapus
  2. Thanks triknya gan, sangat membantu.
    wlaupun awalnya bingung karna gk bisa di resize, eh ternyata div nya ja yg dikecilin,,,,,


    mantapppp gan...

    BalasHapus