Belajar Rounded Corner di CSS

CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau sudut bundar pada box dengan menggunakan properti border-radius. Nilai dari properti ini merupakan tingkat lengkungan border dalam pixel.

  1. .rounded {

  2.    border-radius: 10px;

  3. }


Jika diterapkan, pinggiran border akan tampak seperti ini:
20191206211525d09ea1b4c4d1371e4f93d924d55fbf2f.png
Kita bisa menetapkan nilai pada individu siku kotak dengan menggunakan properti yang terpisah, seperti ini:

  1. .rounded {

  2.    border-top-right-radius: 5px;

  3.    border-bottom-right-radius: 10px;

  4.    border-bottom-left-radius: 5px;

  5.    border-top-left-radius: 10px;

  6. }


Atau kita dapat menggunakan shorthand sehingga dapat menetapkan keempat nilainya dalam satu properti.

  1. .rounded {

  2.    border-radius: 10px 5px 10px 5px;

  3. }


Maka tiap sisi dari border memiliki ketajaman yang berbeda seperti ini.
20191206211842d99edad2a74dc38202a7ea2018def708.png

Komentar