{"id":22244,"date":"2019-10-24T18:19:37","date_gmt":"2019-10-24T10:19:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22244"},"modified":"2023-07-16T19:59:18","modified_gmt":"2023-07-16T11:59:18","slug":"css-gradient-border","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-gradient-border\/","title":{"rendered":"How to Create CSS Gradient Border Colors"},"content":{"rendered":"

With all the new features in CSS3, we are now able to build image-less websites. In the past, the use of image was inevitable when it comes to showing gradient colors.<\/p>\n

Today, it becomes much leaner with the use of CSS3 Gradient Background<\/strong>. In previous posts, we have shown you how to bring CSS3 Gradient into play as a background color in various forms and directions; Linear<\/a>, Elliptical<\/a>, and Repeating gradients<\/a>.<\/p>\n

But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders<\/strong>? Read on to learn how to do this.<\/p>\n

First Method<\/h2>\n

The first method is by applying CSS3 Gradient within pseudo-elements<\/em>. Well, let\u2019s see how the trick works.<\/p>\n

Top to Bottom Gradient Border<\/h3>\n

We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div<\/code>, as follows.<\/p>\n

HTML<\/strong><\/p>\n

\r\n <div class=\"box\"><\/div>\r\n <\/pre>\n
CSS<\/strong><\/p>\n
\r\n .box {\r\n width: 400px;\r\n height: 400px;\r\n background: #eee;\r\n }<\/pre>\n
To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. We also create 2 rectangles with 2 pseudo-element<\/em>s \u2013 :before<\/code> and :after<\/code> \u2013 and specify the width in the same size as the box border width.<\/p>\n
Position the rectangles on the left and right side of the box and employ linear-gradient<\/code> through background-image<\/code>. You can see how this trick turns out below:<\/p>\n