Border-radius not working with image

Question

This is the code I currently have for this image

border-radius: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
border-image: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
border-image-slice: 10;

I am trying to round the border corners by using:

border-radius: 10px;

But that is not rounding the corners for me. Any help is appreciated. Thank you in advance.

Try to put the image inside a div and apply the border radius on the div — Enrico
– Enrico, Commented May 9, 2016 at 18:06

Farid Karami · Accepted Answer · 2016-05-09 18:38:37Z

8

you must use the div and image into div. like this code

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
            background: linear-gradient(#ff0000 0%, #b200ff 50%, #ff0000 100%);
            padding: 10px;
            display: inline-block;
            border-radius: 20px;
        }
        img {
            width: 500px;
            border-radius: 20px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="FK8.jpg" />
    </div>
</body>
</html>

best regards.

answered May 9, 2016 at 18:38

Farid Karami

2292 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramzy Syed · Accepted Answer · 2023-02-11 17:31:58Z

2

I was struggling with this just now. Was using as an image as a background for a <div> and border-radius simply refused to work. The <div> had two sections - left and right. The left section had an image as a background whereas the right had a simple bg-color. I applied an overflow:hidden to the <div> and voila!

answered Feb 11, 2023 at 17:31

Ramzy Syed

315 bronze badges

Comments

jbrya029 · Accepted Answer · 2016-05-09 18:23:14Z

0

Border-radius and border-image are not the same; however, you can get this working with a ::after pseudo-element.

See updated fiddle: https://jsfiddle.net/2u44tqzy/1/

img {
    position: relative;
    border: 4px solid transparent;
    border-radius: 10px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

img::after{
    position: absolute;
    top: -4px; 
    bottom: -4px;
    left: -4px; 
    right: -4px;
    background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

edited May 9, 2016 at 18:23

answered May 9, 2016 at 18:17

jbrya029

4823 silver badges11 bronze badges

Collectives™ on Stack Overflow

Border-radius not working with image

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related