How to make a border colorful using CSS?

Tags: css

Problem :

I have defined a border class in a div:

<div class="border"></div>

.border {
border: 4px solid;
color: #E72665;

It gives pink color to the border. But instead of pink only. I can 4 colors in borders each covering 25% how can I do that?

Solution :

If you mean each side a different color than you can simply break the declaration into specific sides...

border-top: 1px solid red;
border-right: 1px solid blue;
border-bottom: 1px solid green;
border-left: 1px solid yellow;

Per your comment below...

The only other way to achieve what you want would be to utilize the :after pseudo-class to create a separate element that has a background gradient with your 4 colors and to use that as your border.

Here is a demo:

.border {
    position: relative;
    width: 100px;
    height: 50px;
    background: #ccc;

.border:after {
    content: " ";
    display: block;
    position: absolute;
    width: 100px;
    height: 5px;
    bottom: 0;
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left,  #ff0000 0%, #ff0000 24%, #00ff00 25%, #00ff00 49%, #0008ff 50%, #0008ff 74%, #f605ff 75%, #f605ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(24%,#ff0000), color-stop(25%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#0008ff), color-stop(74%,#0008ff), color-stop(75%,#f605ff), color-stop(100%,#f605ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* IE10+ */
background: linear-gradient(to right,  #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#f605ff',GradientType=1 ); /* IE6-9 */


    CSS Howto..

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    How to display .entry-content CSS on Wordpress home page?

    How do I design a css gradient to look like the attached Facebook Login screen

    How to toggle class using jquery if else statement?

    How can I get Sitecore Field Renderer to use a css class for an image

    How to repeat a menu without using iFrames or PHP in simple HTML/CSS or XML?

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to have css hover effect affect child elements differently?

    How to set the box width same as the screen width?

    how to : change css class of a button in a parent window with javascript or jquery?

    How to change the included CSS files on button click?

    How to make entire div clickable with css only

    How to get width of div using jquery

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to correctly apply the .clearfix:after class to HTML?

    Glide.js, how to check size of image?

    How to apply inverse text mask with CSS

    JSSOR slider: Image Gallery demo keeps showing highlight image on mobile

    how to use CSS clip-path in IE? [closed]

    How to get resultant HTML after executing all scripts?

    How to apply different css style for IE 10 and 11 only?

    How to exclude css files from auto formatting in IntelliJ

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to find the highest z-index using jQuery

    How to prevent CSS table row expanding to parent height

    How to set a fixed width column with CSS flexbox

    How can I align my form to the center of the background? CSS

    How to convert a jQuery fade effect in CSS?

    CSS Positioning: How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs

    How can I position list in