Chrome Border-radius Scaling?

Question

Never come across this issue before, and I cant see any other references to it. Basically, I have a website with rounded corners on the top and bottom containers. Now, these were working perfectly but have suddenly stopped since I started having issues with IMG DECODING FAILED. I've since resolved these (I think) but now, my rounded corners aren't working properly on the bottom of the container.

My CSS is as follows:

.sub_footer {
  background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
  color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
  overflow: hidden;
}

I've used the css to make the rounded corner rather than images as I feel its a more dynamic technique.

This css is identical to the top container (except its top right and top left corners that are being rounded).

You can view the website here if you want to see it in action: http://1074796728.1071867011.temp.prositehosting.co.uk/ (this site wont let me post images)

The bottom corners are slightly rounded but to a different degree than the top, eventhough both declarations are for 15px.

Can someone help?

Answer 1

There is nothing wrong with the CSS You shold change the height of the Footer Div See

Thanks

Udit Bhardwaj

Answer 2

Try changing this one:

.sub_footer {
  background: url(/uploads/images/blue_footer_bg.jpg)repeat-x;
  color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
  overflow: hidden;
}

To this one:

.sub_footer {
  background: url(/uploads/images/blue_footer_bg.jpg)repeat;
  color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  text-shadow: 0px 1px 10px rgba(1, 1, 1, 1);
  overflow: hidden;
}

Answer 3

Hi now remove padded class you define in your sub_footer child and now

define your .sub_footer height: 30px; padding-top: 15px; as like this

.sub_footer
{height: 30px;
padding-top: 15px;
}

Than Result is this

Answer 4

Simpler solution is to

Just add padding:15px; to class col12 under sub_footer class

.sub_footer .col12{
    padding:15px;
}

Answer 5

put webkit's on your border radius statements.

-webkit-border-radius:
-moz-border-radius: