CSS3 Border Radius

Question

I am making a calculator with with js and css and the main div that holds the calculator body has rounded edges

#calc {
  background-color: #4CADEC;
  border-radius: 3%;
  height: 500px;
  margin: 200px 300px 400px 225px;
  width: 400px;
}

I am trying to overlay the main body with a different background color for the screen part of the calculator

#top {
  background-color: #808080;
  border-radius: 15% 15% 0% 0%;
}

The problem is that because the top element is smaller the corners curve at a shallower angle than the calc div element

Answer 1

Can you simply use absolute units?

#calc {
  border-radius: 15px;
}

#top {
  border-radius: 15px;
}