Breaking News: Grepper is joining You.com. Read the official announcement!

Add linear-gradient & border-radius simultaneously to border

Innocent answered on November 26, 2020 Popularity 9/10 Helpfulness 5/10

answer Add linear-gradient & border-radius simultaneously to border

related gradient border with border radius

Add linear-gradient & border-radius simultaneously to border

Comment

			 /* If there is NO content inside the container */
             borderRadius: '10px',
             border:'double 5px transparent',
             backgroundImage: 'linear-gradient(white, white) ,linear-gradient(to left bottom, #5232d2, #006cf4, #0093fb, #00b4f3, #00d0e6, #35d7e4, #50dee2, #66e5e0, #65dce4, #6bd2e5, #74c7e2, #7fbddc)',
             backgroundOrigin: 'border-box',
             backgroundClip: 'content-box, border-box'
             
             /* If there IS content inside the container */
             borderRadius: '10px',
             border:'double 5px transparent',
             backgroundImage: 'linear-gradient(white, white) ,linear-gradient(to left bottom, #5232d2, #006cf4, #0093fb, #00b4f3, #00d0e6, #35d7e4, #50dee2, #66e5e0, #65dce4, #6bd2e5, #74c7e2, #7fbddc)',
             backgroundOrigin: 'border-box',
             backgroundClip: 'padding-box, border-box'

Popularity 9/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: add border border-radius css

Link to this answer
Share Copy Link

Contributed on Jul 17 2022

Innocent

0 Answers Avg Quality 2/10

Closely Related Answers

gradient border with border radius

Comment

.rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Popularity 10/10 Helpfulness 9/10 Language css

Source: Grepper

Tags: border bo

Link to this answer
Share Copy Link

Contributed on Nov 26 2020

Rohan

0 Answers Avg Quality 2/10

Add linear-gradient & border-radius simultaneously to border

Contents

More Related Answers

Add linear-gradient & border-radius simultaneously to border

Closely Related Answers

gradient border with border radius

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.