Membuat Rounded-Corner Pada Border Dengan Css3

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

Rounded-corner merupakan bentuk lengkung pada siku border (pojok-pojok border). Contohnya sanggup 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 sanggup dibentuk dengan gampang dengan memanfaatkan kemudahan property border-radius. Properti ini akan bermanfaat untuk membuat kreasi pada elemen-elemen yang memakai border, contohnya pada tabel maupun pada division yang mempunyai border.

Bentuk standarnya berdasarkan spesifikasi W3C ialah 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 sanggup dilakukan dengan mengkombinasikan dan mengubah-ubah nilai radius. Bila tutorialnya kurang terang sanggup ditanyakan pada bab komentar, saran dan kritik yang membangun akan saya terima dan tanggapi dengan bahagia hati... Selamat mencoba kawan....

Subscribe to receive free email updates:

0 Response to "Membuat Rounded-Corner Pada Border Dengan Css3"

Posting Komentar