 |
New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 4 |
Gradient Borders
You can create a border from a gradient function by first defining the gradient function
as either a linear or radial gradient. The gradient can then be sliced using the
border-image style in the same way that an image file can be sliced to
generate the sides and corners of the border image.
Use the web form below to enter a gradient function and define the border image slices. The first preview box shows a preview of the gradient. The second preview box shows how slices from that gradient will be applied to create a gradient border.
Gradient Borders
0% 50%
border: 30px transparent solid;
border-image: (linear-gradient(red, green, blue)) 20 ;
border-image: (linear-gradient(red, green, blue)) 20 ;