CSS Border Radius

View Categories

CSS Border Radius

CSS Border Rounded

Properti border-radius digunakan untuk menambahkan border yang melingkar (rounded) ke dalam sebuah elemen:

Border normal

Border melingkar

Border lebih melingkar

Border yang sangat melingkar

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
  padding: 5px;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
  padding: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
  padding: 5px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
  padding: 5px;
}
</style>
</head>
<body>

<h2>Properti border-radius</h2>
<p>Properti ini digunakan untuk menambahkan border yang melingkar (rounded):</p>

<p class="normal">Border normal</p>
<p class="round1">Border melingkar</p>
<p class="round2">Border lebih melingkar</p>
<p class="round3">Border paling melingkar</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : CSS Border Untuk Setiap Sisi
Tutorial setelahnya : Margin CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan