Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

CSS Border Radius make an image round

I have a page that has three images across,  I am trying to make the images all round with a border-radius of 50%.  However, due to the size of the boxes they keep coming out oblong.  I need to keep it responsive. They are three images that are titeled INNOVATION in the middle of the page:
http://cohr-dev-ee01.azurewebsites.net/index.php/
ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You can just set the image as background of .image class and give to the img element inside display: none:

.discover-box .image {
  background: #fff url("../images/site_images/innovation.jpg") no-repeat scroll center center;
  border-radius: 50%;
  height: 255px;
  margin: 20px auto;
  overflow: hidden;
  width: 255px;
}

.discover-box .image img {
  display: none;
}

Open in new window