Question 370720 in Html Question posted in
Some basic documentation can be found here.

Html – How do I create a gradient and rounded border using CSS?

I would like to create a gradient and rounded border like the one shown below, which is from the topbar of Instagram.

I know how to create a rounded and solid border, but this one is gradient.

It seems that Instagram uses a canvas, but can I do it using CSS?

If not, canvas is also OK, please teach me.

Thanks!

enter image description here

Tags:

2

Answers


  1. 0

    You can nest two elements and let the outer div act as the gradient border then you can work around this problem, For example:

    .gradient-box {
    background: linear-gradient(red, black);
    box-sizing: border-box;
    padding: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.content-box {
    background: white;
    padding: 10px;
    border-radius: 2px;
    box-sizing: border-box;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="gradient-box">
        <div class="content-box">
            Gradient Border
        </div>
    </div>
</body>

</html>

    Adjust border size by increasing padding of .gradient-box.

    Login or Signup to reply.
  2. 0

    You can always use the linear-gradient function as background property to create that instagram look of a progressive transition of colors around your photo. Please look at the example below where I am using the instagram colors shown on this page. I hope this helps, keep having fun coding!

    .profile-photo {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; 
  width: 150px;
  height: 150px; 
  border-radius: 50%;
  border: 3px solid transparent;
  background-image: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  background-origin: border-box; 
  background-clip: padding-box, border-box;
  padding: 5px; 
}

.profile-photo img {
  border-radius: 50%;
  width: 100%; 
  height: 100%; 
}
    <div class="profile-photo">
<img src="https://res.cloudinary.com/alvison-hunter/image/upload/v1700337264/al-hunter-website/n04rwptnt6kufnb6xcms.png" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search