CSS Border Radius

Mengatur ketumpulan sudut (border-radius) pada elemen HTML

Setiap elemen HTML pada dasarnya berbentuk box, sehingga memiliki 4 sudut lancip.
Property border-radius pada CSS akan mengatur sudut lancip menjadi tumpul.

Property border-radius

No.	sudut	nama properti
1.	4 sudut	{border-radius: nilai radius}
2.	sudut atas kiri	{border-top-left-radius: nilai radius}
3.	sudut atas kanan	{border-top-right-radius: nilai radius}
4.	sudut bawah kiri	{border-bottom-left-radius: nilai radius}
5.	sudut bawah kanan	{border-bottom-right-radius: nilai radius}

Membuat elemen box normal sudut lancip

<div></div>
<style>
div {
  background: dodgerblue;
  padding: 20px;
  display: block;
  margin: 20px auto;
  width: 150px;
  height: 100px
  }
</style>

Contoh penggunaan

<style>
div {
  border-radius:20px
}
</style>

<style>
div {
  border-top-left-radius:20px
}
</style>

<style>
div {
  border-bottom-left-radius: 20px;
}
</style>

<style>
div {
  border-top-left-radius:20px;
  border-top-right-radius:20px
}
</style>

<style>
div {
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px
}
</style>

<style>
div {
  border-top-right-radius:20px;
  border-bottom-left-radius:20px
}
</style>

<style>
div {
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px
}
</style>

Dalam prakteknya, properti border-radius paling sering digunakan pada elemen seperti tombol.

Nilai border-radius menggunakan %

5%

15%

25%

50%