Properti border-radius

Properti border-radius membuat sudut melengkung untuk border dan latar belakang. Nilai properti adalah satuan ukuran apa pun. Nilai default: 0. Merupakan singkatan untuk properti border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaks

cssselektor {
  border-radius: nilai;
}

Jumlah Nilai

Properti dapat menerima 1, 2, 3 atau 4 nilai, yang ditentukan dengan spasi:

Pembulatan Elips

Dua nilai yang dipisahkan garis miring menentukan pembulatan elips. Nilai sebelum garis miring menunjukkan pembulatan horizontal, dan nilai setelah garis miring - pembulatan vertikal:

cssselektor {
  border-radius: horizontal / vertikal;
}

Jika pembulatan ditentukan untuk beberapa sudut, maka sebelum garis miring dicantumkan semua pembulatan horizontal, dan setelahnya - semua pembulatan vertikal.

Contoh

Mari atur pembulatan 10px untuk semua sudut:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Mari lihat bagaimana pembulatan untuk border berbentuk titik terlihat:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Mari atur pembulatan 10px untuk sudut satu diagonal, dan pembulatan 40px - untuk sudut diagonal kedua:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Mari atur pembulatan 10px untuk sudut kiri atas, pembulatan 30px untuk sudut kanan bawah, dan pembulatan 50px - untuk sudut diagonal kedua:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Mari atur pembulatan yang berbeda untuk setiap sudut:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Mari buat pembulatan elips, dengan mengatur 20px untuk bagian pembulatan horizontal, dan 40px - untuk bagian vertikal:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Sekarang mari atur pembulatan elips yang berbeda untuk semua sudut secara terpisah:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Contoh

Jika untuk blok persegi diberikan pembulatan, yang sama dengan setengah sisi persegi, maka akan dihasilkan lingkaran:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Contoh

Jika diberikan pembulatan yang lebih besar dari sisi persegi, maka tetap akan dihasilkan lingkaran:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Contoh

Lingkaran juga bisa didapatkan, jika mengatur border-radius ke 50% (keuntungannya adalah ketika mengubah ukuran persegi tidak perlu mengubah pembulatan):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Contoh

Jika mengatur border-radius dalam persentase untuk persegi panjang, maka akan dihasilkan pembulatan elips. Jika lebar ditetapkan 400px, tinggi 200px, dan border-radius 10%, maka ini sama saja, seperti jika ditulis 40px/20px:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Contoh

Mari atur nilai border-radius ke 50% untuk persegi panjang - akan dihasilkan elips:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Contoh

Properti border-radius tidak hanya membulatkan sudut border, tetapi juga latar belakang:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Lihat Juga