Membuat Rounded-Corner pada Border dengan CSS3

Tulisan ini saya posting bagi anda semua yang ingin berkreasi dalam pemrograman web dengan memanfaatkan CSS3 agar desain yang dihasilkan menjadi lebih manarik.

Rounded-corner merupakan bentuk lengkung pada siku border (pojok-pojok border). Contohnya dapat dilihat pada gambar di bawah ini. Semua pojok dari border menjadi garis lengkung.

Contoh Rounded-corner

Contoh Rounded-corner

Contoh Rounded-corner

Dalam CSS3 rounded-corner dapat dibuat dengan mudah dengan memanfaatkan fasilitas property border-radius. Properti ini akan bermanfaat untuk menciptakan kreasi pada elemen-elemen yang menggunakan border, misalnya pada tabel maupun pada division yang memiliki border.

Bentuk standarnya menurut spesifikasi W3C adalah sebagai berikut.

border-radius

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

Skrip CSS untuk rounded-corner

• Contoh penulisan border-radius dan hasilnya:
border-radius: 15px;


border-radius: 30px 5px;


border-radius: 0px 15px 60px 0px;


• Contoh penulisan border-top-left-radius dan hasilnya:
border-top-left-radius: 20px;


• Contoh penulisan border-top-right-radius dan hasilnya:
border-top-right-radius: 20px;


• Contoh penulisan border-bottom-right-radius dan hasilnya:
border-bottom-right-radius: 20px;


• Contoh penulisan border-bottom-left-radius dan hasilnya:
border-bottom-left-radius: 20px;

Demikianlah contoh-contoh border radius dan bentuk penulisan script CSS yang digunakan. Untuk memperoleh bentuk yang menarik dapat dilakukan dengan mengkombinasikan dan mengubah-ubah nilai radius. Bila tutorialnya kurang jelas dapat ditanyakan pada bagian komentar, saran dan kritik yang membangun akan saya terima dan tanggapi dengan senang hati... Selamat mencoba kawan....

Artikel Terkait