CSS: Border on border?

Question

I've been asked to re-create some art work in CSS and I'm trying to add a border on top off a border. I have 2 images here, one is of my current progression and the others of the art work.

My progressiong:
https://i.stack.imgur.com/MWOQu.png

What I'm aiming to make:
https://i.stack.imgur.com/9Ka1w.png

Is there any easy way to do this?

#bottom-bar {
    position: fixed;
    background-color: #2F2F2F;
    border-top: 1.8px solid #5f5f5f99;
    border-bottom: 1px solid #5f5f5f99;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    z-index: 2000;
}

Please post your code, so others can provide better answers. https://stackoverflow.com/help/how-to-ask — fubar, Feb 05 '18 at 00:21

Facundo Corradini · Answer 1 · 2018-02-05T00:44:51.160

0

You can use inset box-shadow to make multiple borders

div{
  width:100px; height:100px; 
  box-shadow:  inset 0 0 0 10px black,
               inset 0 0 0 20px grey;
}

<div></div>

The trick is to use progressively bigger spread "shadows", as they get covered by the ones before. For instance, to make a 10px border after another 10px border, you need to declare it bellow and use 20px as the border spread.

For 1-side only, use negative spread and vertical offset as follows:

div{
  width:100px; height:100px; 
  border:1px solid red;
  box-shadow: inset 0 20px 0 -10px black,
       inset 0 30px 0 -10px grey;
}

<div></div>

edited Feb 05 '18 at 00:44

answered Feb 05 '18 at 00:19

Facundo Corradini

3,825
9
24

This isn't an answer, its merely a comment, an answer includes an example of how to do what you're "saying". See https://stackoverflow.com/help/how-to-answer – hello Feb 05 '18 at 00:20
@hello sorry 'bout that. Somehow an "enter" posted the comment while I was just trying to make a line break for the example. I've edited with it now ;) – Facundo Corradini Feb 05 '18 at 00:23
I see you've added a way, but in my example I only need it on the top, is there a way to do this? – hello Feb 05 '18 at 00:27
@hello yup, just use negative spread and positive vertical-offset. I've added an example for that as well ;) – Facundo Corradini Feb 05 '18 at 00:45

CSS: Border on border?

1 Answers1