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.
- .rounded {
- border-radius: 10px;
- }
Jika diterapkan, pinggiran border akan tampak seperti ini:
Kita bisa menetapkan nilai pada individu siku kotak dengan menggunakan properti yang terpisah, seperti ini:
- .rounded {
- border-top-right-radius: 5px;
- border-bottom-right-radius: 10px;
- border-bottom-left-radius: 5px;
- border-top-left-radius: 10px;
- }
Atau kita dapat menggunakan shorthand sehingga dapat menetapkan keempat nilainya dalam satu properti.
- .rounded {
- border-radius: 10px 5px 10px 5px;
- }
Maka tiap sisi dari border memiliki ketajaman yang berbeda seperti ini.
