Is it Possible to Draw a Triple Border only on one side of a Rectangle?

I would like to have a Triple Border only one side of a rectangle Without using an Extra Html tag.The Code I have tried so far is Given Below.

Method#1

#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}

Method#2

#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}

But this can be only use in case if you need Triple Border on all Sides,Instead Of that I only needs the Triple Border on One side.Is it Possible?.Please Help me

3 Answers
3

Using this CSS Property

box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;


#element {
width: 100px;
height: 100px;
box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
}

You can use before and after to achieve this.

before

after

#element {
width: 100px;
height: 100px;
border-right: 5px solid black; /* inner border */
/* box-shadow: 0px 0px 0px 15px black; */ /* outer 'border' */
/* outline: 12px solid green; */ /* fill */
margin-left: 30px;
margin-top: 30px;
}
.triple-right {
position: relative;
}
.triple-right:before, .triple-right:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 5px;
}
.triple-right:before {
background-color: green;
right: -10px;
}
.triple-right:after {
background-color: black;
right: -15px;
}

Here is another idea using gradient:

#element {
width: 100px;
height: 100px;
background:
linear-gradient(#000,#000) right/ 5px 100%,
linear-gradient(red,red) right/ 10px 100%,
linear-gradient(blue,blue) right/ 15px 100%;
/*And so on if you want more border*/

background-repeat:no-repeat;

}

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.