Border-radius dalam persentase (%) dan piksel (px) atau em

Jika saya menggunakan piksel atau nilai em untuk radius-batas, radius tepi selalu berupa busur lingkaran atau bentuk pil bahkan jika nilainya lebih besar dari sisi terbesar elemen.

Saat saya menggunakan persentase , jari-jari tepi berbentuk elips dan dimulai di tengah setiap sisi elemen yang menghasilkan bentuk oval atau elips :

Nilai piksel untuk radius batas:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

Nilai persen untuk radius-perbatasan:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

Mengapa radius batas dalam persentase tidak bertindak dengan cara yang sama seperti radius batas yang disetel dengan nilai piksel atau em?

Radius batas:

Pertama, Anda perlu memahami bahwa properti border-radius memiliki 2 nilai. Nilai-nilai ini adalah jari-jari pada sumbu X / Y dari seperempat elips yang menentukan bentuk sudut.
Jika hanya satu dari nilai yang ditetapkan maka nilai kedua sama dengan yang pertama. Begitu border-radius: xpula dengan border-radius:x/x;.

Nilai persentase

Mengacu pada spesifikasi W3C: CSS Backgrounds and Borders Module Level 3 border-radius property inilah yang dapat kita baca mengenai nilai persentase:

Persentase: Mengacu pada dimensi yang sesuai dari kotak perbatasan.

Jadi border-radius:50%;tentukan raddi elips dengan cara ini:

• jari-jari pada sumbu X adalah 50% dari lebar kontainer
• jari-jari pada sumbu Y adalah 50% dari tinggi kontainer

Pixel dan unit lainnya

Menggunakan satu nilai selain persentase untuk radius perbatasan (em, in, viewport related units, cm ...) akan selalu menghasilkan elips dengan jari-jari X / Y yang sama. Dengan kata lain, lingkaran .

Saat Anda mengatur border-radius:999px;jari-jari lingkaran harus 999px. Tetapi aturan lain diterapkan ketika kurva tumpang tindih mengurangi jari-jari lingkaran menjadi setengah ukuran sisi terkecil. Jadi dalam contoh Anda, itu sama dengan setengah tinggi elemen: 50px.

Untuk contoh ini (dengan elemen ukuran tetap) Anda bisa mendapatkan hasil yang sama dengan piksel dan persentase. Karena elemennya 230px x 100px, border-radius: 50%;setara dengan border-radius:115px/50px;(50% dari kedua sisi):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

Bagilah nilai pertama dengan% yang Anda inginkan .. jadi jika Anda menginginkan radius-batas 50%, tulis:

border-radius: 25%/50%; 

atau contoh lain:

border-radius: 15%/30%;

Anda dapat dengan mudah melakukan matematika di js atau SASS.