Tutorial Belajar CSS3: Cara Membuat Sudut Melengkung (Rounded Corner) di CSS

Posted on

Efek sudut melengkung atau sering disebut dengan rounded corner sebetulnya telah lama diidam-idamkan oleh web designer, tapi baru di di CSS3 efek ini dapat dikerjakan seketika dengan CSS. Di panduan belajar CSS3 kali ini saya akan membahas cara membuat sudut lengkung (rounded corner) di CSS menggunakan property border-radius.


Cara Mendesain Sudut Melengkung (Rounded Corner) di CSS

Untuk menyusun sudut membulat, sudut melengkung atau rounded corner, di CSS3 kita menggunakan property border-radius. Nilai untuk property berupa satuan panjang seperti pixel, atau em. Semakin tinggi nilainya, semakin melengkung efek yang diraih.

Berikut contoh cara menyusun rounded corner:

Di contoh diatas, saya menyusun sebuah box menggunakan tag <div>. Efek rounded corner diraih dari property border-radius: 10px yang akan menyusun keempat sudut box melengkung.

Bagaimana cara mengubah warna border ini? kita lumayan merubahnya dari property border dan secara otomatis warna border-radius pun ikut berubah:

Kali ini saya menyusun 4 kotak yang masing-masingnya menggunakan nilai border-radius yang berbeda-beda. Dapat terlihat bahwa semakin tinggi nilainya, semakin ‘membulat’ efek yang diraih.


Mengatur Border Radius untuk Setiap Sudut

CSS3 pun membolehkan kita untuk mengubah besar sudut secara terpisah. Untuk ini kita menggunakan 4 property:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Sesuai dengan namanya, setiap property ini mempunyai peran masing-masing. Misalnya property border-top-left-radius digunakan untuk mengatur rounded corner untuk sudut kiri atas. Berikut contoh penggunaannya:

Di kode diatas saya menggunakan nilai yang berlainan untuk setiap sudut. Seperti yang terlihat, box kita  mempunyai besar bulatan sudut yang berbeda-beda.

Property border-radius yang kita bahas disini betul-betul gampang dan cepat untuk memperoleh efek rounded corner. Sebelum property ini hadir di CSS3, efek yang sama betul-betul susah dikerjakan.


eBook CSS Uncover Duniailkom

Kalau sobat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti
animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/