Border-radius generates eclipse, need 90degree rounded corners. CSS

Question

So I'm trying to get a 90degree angle corner on my rectangle (width 96.6%, height 6.5%)

Applied settings on rectangle: Border-radius-bottom-left: 5%; Border-radius-bottom-right: 5%;), this gives it a eclipse shape, but it needs to be a 90 degree corner.

What settings do I need to use to get this?

Answer 1

You need to use absolute metrics for your border-radius e.g. px, em or in and not % to make sure, that x and y values are qual. Otherwise they will depend on the values of width and height and as long as your element isn't a square, you will get an ellipsis.

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rectangle {
  width: 96.6%;
  height: 6.5%;
  background: green;
  border-radius: 10px;
}

<div class="rectangle"></div>

Read this nice article on CSS-Tricks about border-radius.