Round frame with gradient color.

Question

I have a problem, I would like to have a rounded gradient border, but apparently border-radius does not work with border-image .

I attached the result, I would like to round the square border.

Thank you for the 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> 

Answer 1

This can be achieved using CSS using a pseudo-class, for example :before .

Unfortunately, it does not have a transparent part between the border and the circle itself, but if you know that it will always be on a certain colored background, this should not 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> 

Answer 2

I recommend you use SVG to create this shape. It offers simplicity and scalability.

We can use the SVG circle element to create a shape as described above, and fill / stroke it with some kind of solid color, gradient or pattern.

The following code will create a circle shape:

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

The following is a brief description of the parameters used in the above code:

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

To fill the closed form with a 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 reference the fill and stroke attribute in the form using id , like fill="url(#grad1) or stroke="url(#grad1) . And the direction of the gradient can be controlled using the attributes x1 , y1 , x2 and y2 .

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:

The following are useful links for SVG :

• Specification
• MDN