Round border with gradient color

Question

I have an issue, I would like to have a rounded gradient border, but apparently border-radius is not working with border-image.

I attached the result, I would like the square border to be rounded.

Thank you in advanced.

.luna-icon-wrap{
  float: right;
  padding: 5px 5px;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  border: 2px solid transparent;
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
} 


.luna-featbox2-icon{ 
  width: 70px;
  height: 70px;
  text-align: center;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  background: #43257f; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #43257f, #40c4ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #43257f, #40c4ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #43257f, #40c4ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #43257f, #40c4ff); /* Standard syntax */
}

<div class="luna-icon-wrap">
  <div class="luna-featbox2-icon">
    <i class="fa fa-diamond"></i>
  </div>
</div>

Possible duplicate of [Possible to use border-radius together with a border-image which has a gradient?](https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient) — priya_singh, Oct 25 '17 at 11:22
Does the space between the border and the circle need to be transparent? If not, you could do it by using background-image instead of border-image — Alvaro Montoro, Oct 25 '17 at 14:24

Mohammad Usman · Answer 1 · 2017-10-25T12:03:01.613

I'll recommend you to use SVG to create this shape. It offers simplicity and scale-ability.

We can use SVG's circle element to create a shape like above and fill / stroke it with some solid color, gradient or a pattern.

Following code will create circle shape:

<circle cx="50" cy="50" r="39" fill="blue" />

Below is a brief description of parameters used in above code:

cx defines the x position of circle.
cy defines the y position of circle.
r defines radius of circle.

To fill a closed shape with gradient we need to create a gradient object:

<defs>
    <linearGradient id="grad1" x1="1" y2="1">
      <stop offset="0" stop-color="#3acfd5" />
      <stop offset="1" stop-color="#3a4ed5" />
    </linearGradient>
</defs>

This object can be referenced by fill and stroke attribute in a shape using id like fill="url(#grad1) or stroke="url(#grad1). And the direction of gradient can be controlled by its x1, y1, x2 and y2 attributes.

Output Image:

Working Example:

<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad1" x1="1" y2="1">
      <stop offset="0" stop-color="#3acfd5" />
      <stop offset="1" stop-color="#3a4ed5" />
    </linearGradient>
    <linearGradient id="grad2" y2="1">
      <stop offset="0" stop-color="#43257f" />
      <stop offset="1" stop-color="#40c4ff" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="45" fill="none" stroke="url(#grad1)" stroke-width="2" />
  <circle cx="50" cy="50" r="39" fill="url(#grad2)" />
</svg>

Useful Resources:

Below are some useful links for SVG:

score 2 · Accepted Answer · answered Oct 26 '17 at 08:21

This can be achieved with CSS using a pseudo class like :before.

Sadly, it doesnt have the transparent part between the border and the circle itself but if you know its always going to be on a certain colored background, that shouldn't be a problem.

.luna-icon-wrap{
  float: right;
  padding: 1px 1px;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  border: 2px solid transparent;
  position: relative;
} 
.luna-icon-wrap:before {
content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e5799 0%,#7db9e8 100%);
  z-index: -2;
}

.luna-featbox2-icon{ 
  width: 70px;
  height: 70px;
  text-align: center;
  -webkit-border-radius: 50% 50%;
  -moz-border-radius: 50% 50%;
  border-radius: 50% 50%;
  border: 4px solid white;
  background: #43257f; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #43257f, #40c4ff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #43257f, #40c4ff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #43257f, #40c4ff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #43257f, #40c4ff); /* Standard syntax */
}

<div class="luna-icon-wrap">
  <div class="luna-featbox2-icon">
    <i class="fa fa-diamond"></i>
  </div>
</div>

Round border with gradient color

2 Answers2