Properti border-radius di CSS memungkinkan Anda membuat sudut melengkung pada elemen kotak, tombol, kartu, atau bahkan membuat lingkaran sempurna.
Anda dapat memberikan satu nilai untuk keempat sudut, atau memberikan nilai spesifik untuk sudut tertentu seperti border-top-left-radius.
<!DOCTYPE html>
<html>
<head>
<style>
.kotak-lengkung {
background-color: #0d2e5c;
color: white;
padding: 20px;
width: 260px;
text-align: center;
border-radius: 20px;
margin-bottom: 15px;
}
.lingkaran {
background-color: #fca311;
color: #0d2e5c;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 50%;
font-weight: bold;
}
</style>
</head>
<body>
<div class="kotak-lengkung">Sudut Melengkung 20px</div>
<div class="lingkaran">Bulat 50%</div>
</body>
</html>Uji dan amati bagaimana deklarasi CSS CSS Rounded Corners mengubah tampilan elemen di atas.