CODEWITHSUNDEEP
cssborder
user51030
user51030

Reputation: 29

How to give Double Border-right & left colors

I'm trying to style a double border and to give each double border their own colors. I'm only styling each side (border-left & border-right).

I've been looking and couldn't find an article about adding individual colours to each border of a double-border

border-color: #cbcccd;
border-style: solid;
border-width: 0px 1px 0px 1px

There are some articles on using box-shadow but none that covers when you only want it to apply to the side borders. If someone has a solution, or something better you,re help would be appreciated!

Upvotes: 0

Views: 1908

Answers (3)

aniskhan001
aniskhan001

Reputation: 8521

You can use :before pseudo element and add another border to that.

Example CSS:

.foo{
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-right-color: orange;
    border-left-color: red;
    position: relative
}

.foo:before{
    content: "";
    border-style: solid;
    border-width: 0px 5px 0px 5px;
    border-right-color: green;
    border-left-color: blue;
    position: absolute;
    width: 100%;
    height: 100%;
}

DEMO

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

Multiple boxshadows will work quite well here

JSfiddle Demo

CSS

div {
    border-color: grey;
    border-style: solid;
    border-width: 0px 1px 0px 1px;
    height:100px;
    width:100px;
    margin:25px auto;
    box-shadow:-2px 0 0 0 red, 
                2px 0 0 0 green;
}

Upvotes: 2

Ian Pennebaker
Ian Pennebaker

Reputation: 245

This might work: Put whatever you are trying to add a border to inside a div and then add a border to the div and style them each separate. for example:
HTML: <div><table></table></div>
CSS: table{border-color: green} div{border-color: purple}

Upvotes: 0

Related Questions