Menu
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.
268
The CSS property border-radius adds rounded corners on images. You can round all of the image's corners or just select corners, vary the radius on different corners or display an image in the shape of an oval or a circle.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
