CODEWITHSUNDEEP
htmlwebkitbordercss
RMi Flores
RMi Flores

Reputation: 377

Webkit border-radius cutting off border

I was initially going for an image with a black border, along with rounded corners. However, rather than having both a rounded image and a rounded border, on Webkit I ended up with a rectangular image and a rounded border. The rectangular image seemed to overlap parts of the border at the corners, making for a slightly weird looking result. On firefox and opera I've come up with the result I had wanted but I was wondering how I would achieve the same effect on webkit. Here's some code you can run to see what I'm talking about. Thanks in advance for the help!

<!doctype html>

<html>

<head>
    <title> Testing Website </title>

    <style type="text/css">
        img {
            height: 500px;
            border: 5px solid #000;
            border-radius: 20px;
            -moz-border-radius: 20px;
        }
    </style>
</head>

<body>

    <img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">

</body>

</html>

Upvotes: 0

Views: 1797

Answers (3)

Alfred
Alfred

Reputation: 21386

Try;

img{
  height: 500px;
  width: 500px;
  border: 5px solid #000;
  border-radius: 20px;
  -moz-border-radius: 20px;
  display:block;
}

Upvotes: 0

PaperThick
PaperThick

Reputation: 2799

You could try a jQuery plugin. Gives a lot of options. http://jquery.malsup.com/corner/

Upvotes: 0

doktorgradus
doktorgradus

Reputation: 627

Use box-shadow: http://jsfiddle.net/UQ2kt/

Upvotes: 3

Related Questions