How can i make image border rounded to my profile images
<!DOCTYPE html>
<html>
<head>
<style>
.roundedimg {
border-image: linear-gradient(to right, #3acfd5 0%, #a5bbe4 100%) 1;
border-radius: 50%;
width: 50px;
height: 50px;
border-style: solid;
padding: 5px;
}
</style>
</head>
<body style="background-color: #000;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/1200px-Circle-icons-profile.svg.png" class="roundedimg">
</body>
</html>
Border-radius has no effect on the border image. See ‘Rounded Borders’ section here:
1 Like
not helpfully, this instructions doesn’t solve my problem
PaulOB
April 8, 2025, 2:25pm
4
Craig20001x:
<!DOCTYPE html>
<html>
<head>
<style>
.roundedimg {
border-image: linear-gradient(to right, #3acfd5 0%, #a5bbe4 100%) 1;
border-radius: 50%;
width: 50px;
height: 50px;
border-style: solid;
padding: 5px;
}
</style>
</head>
<body style="background-color: #000;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/1200px-Circle-icons-profile.svg.png" class="roundedimg">
</body>
</html>
Assuming the image is not transparent and assuming you don’t want to see anything under the image you could fake it with a background gradient like this.
https://codepen.io/paulobrien/pen/VYwObWZ/7b08a264719eec0dbe0af9bb8333a462
Note that the outline color must match the background of the document (or parent elements background) for this effect to work.
1 Like
PaulOB
April 8, 2025, 2:56pm
5
For modern browsers you could get a transparent section using mask-image but it needs a parent wrapper on the image and the code is a little more complex.
https://codepen.io/paulobrien/pen/mydYwRM/0878031412f399ae42a72a1ddb0b6792
1 Like