How to have more than one Edge in an Element with CSS

Question

I have one element, but I wanted it to have several edges. I didn’t want to have to use several divs for this... I wanted something around 10 to 8 edges.

Is there any more practical way to put more than one border and an element?

Example of what I don’t want!

.container {
  border-color: #e3e3e3;
  width: 200px;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.container div {
  height: 100%;
  width: 100%;
  position: absolute;
}

.container div:nth-child(1) {
  border: 20px solid black;
}

.container div:nth-child(2) {
  border: 18px solid blue;
}

.container div:nth-child(3) {
  border: 16px solid green;
}

.container div:nth-child(4) {
  border: 14px solid purple;
}

.container div:nth-child(5) {
  border: 12px solid palevioletred;
}

.container div:nth-child(6) {
  border: 10px solid orange;
}

.container div:nth-child(7) {
  border: 8px solid red;
}

.container div:nth-child(8) {
  border: 6px solid yellow;
}

.container div:nth-child(9) {
  border: 4px solid silver;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div>1</div>
</div>

Answer 1

The estate box-shadow allows attaching one or more shadows to an element. The shadow style chosen for this demonstration is the inset, that refers to the idea of insertion. So the shadow is placed inside the frame. As for the other settings:

---

Example:

inset - estilo         (Especifica o estilo da sombra)
0     - offset-x       (Especifica a distância horizontal)
0     - offset-y       (Especifica a distância vertical) 
0     - blur-radius    (Especifica a desfocagem)
4px   - spread-radius  (Especifica a expansão/encolhimento da sombra)
#fff  - cor            (Especifica a cor da sombra)

The settings can be other, so follow support link.

---

body {
  background-image: linear-gradient(180deg, #fff 100%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.multiple-border {
  background-color: #fff;
  border: 2px solid #000000;
  box-shadow:
    inset 0 0 0 2px #E0FFFF,
    inset 0 0 0 4px #4B0082,
    inset 0 0 0 6px #A9A9A9,
    inset 0 0 0 8px #ADFF2F,
    inset 0 0 0 10px #aa000a,
    inset 0 0 0 12px #99F0F9,
    inset 0 0 0 14px #888AAA;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}

<div class="multiple-border">
  <!-- Content -->
</div>

Response drawn from: Stackoverflow
User: Terry

Answer 2

As you yourself mentioned we have the possibility to do using divs, but preferably I think the less HTML best, for reasons of performance. Let’s look at some cases and how to do it.

Multiple edges with pseudo-elements

To make double or triple edges you can use pseudo-elements, it gets a little more boring to do, but has more browser support by using already well-known properties. Take an example:

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  border: 5px solid blue;
}

.borders:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: red;
  z-index: -1;
}

.borders:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: orange;
  z-index: -3;
}

<div class="borders"></div>

In this style you can make a triple edge, as the example. In fact we are kind of doing a gambiarra (but it works :D). What happens is we’re taking an element, a div and applying a before and a after that will have an absolute position in relation to the element itself and with a shift to all sides larger than the applied edge. From this offset we apply a background, which would be the color of your edge.

Multiple edges with box-shadow

This technique has already been shown in two other answers, but it is worth the knowledge. For this we will use the CSS property box-shadow, which by definition is:

The box-shadow is a property of CSS, is used to add shadow effects around an element. You can specify more of an effect, separating them with commas. A box-shadow is described displacements (offset) X and Y relative to the element, unfocus and propagation of radius and colour.

Only the definition already helps enough to understand the property (but nothing better than an example to clear up any doubts that may arise).

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 200px;
  height: 200px;
  background: black;
  position: relative;
  box-shadow: 
    0 0 0 10px hsl(0, 20%, 50%),
    0 0 0 15px hsl(0, 30%, 60%),
    0 0 0 20px hsl(0, 40%, 70%),
    0 0 0 25px hsl(0, 50%, 80%),
    0 0 0 30px hsl(0, 60%, 90%);
}

<div class="borders"></div>

Beauty, the box-shadow gave to understand, he was applying a shadow to the element several times, what allows us to make the edge that is necessary, of any size (the imagination is the limit).

Within that box-shadow We are using the spread-Radius, which defines the size of the shadow. Importantly, positive values increase the shadow, and negative values decrease. Look at this thumb drive that helps you understand better.

But the question worth $1 million is, what is this used hsl?

In fact the hsl to make the edges is irrelavant, it will just set the Hue-saturation-lightness, ie the color, saturation and brightness. I used in the example to have a pattern in the colors and not stay a rainbow.

Show, you can already say that you already know two techniques, but you have more? Yes, you have the technique of writing several divs, as in the question, and other more limited technique using the outline, a property that few know.

Multiple edges with Outline

Outline by definition is used to configure one or more of the Outline-style, Outline-width and Outline-color boundary properties. You can see more about the property here. Finished the brief introduction let’s see an example:

body {
  display: flex;
  justify-content: center;
  padding-top: 05rem;
}

.borders {
  width: 100px;
  height: 100px;
  background-color: black;
  border: 5px solid red;
  outline: 5px solid orange;
  position: relative;
}

.borders:after {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: blue;
  z-index: -3;
  outline: 5px solid purple;
}

<div class="borders"></div>

The cool thing about this technique is that we can integrate it with the first, using pseudo-elements, to apply more edges. I believe it to be a very interesting but limited modification of box-shadow.

Answer 3

The box-shadow is a property of CSS, used to add shadow effects around an element.

Default syntax of this property:

box shadow:

• horizontal/vertical displacement - these two values correspond to the x and y axes respectively, and allow the positioning of the shading
• Blur - allows us to apply a blur to the shading, like the Photoshop Blur Gaussian
• spread (spread) - defines how much we will expand or contract (negative values) our shading
• color - will obviously define the color of our shadow.

You can specify more than one effect by separating them with commas. box-shadow - CSS | MDN

#box
{
	width: 10em;
	font-size: 1.5em;
	text-align: center;
	padding: 2em 1em;
	margin: 50px auto;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 
	0 0 0 4px orange,
	0 0 0 8px green,
	0 0 0 12px blue,
	0 0 0 16px #666,
	0 0 0 20px #fd0,
	0 0 0 24px #000,
	0 0 0 28px pink,
	0 0 0 32px red,
	0 0 0 36px #fa0,
	0 0 0 40px yellow;
}

<div id="box">multiple borders using box-shadow</div>

Compatibility with Browsers

Older browsers don’t have much CSS3 support, but if you’re using updated browsers, it will work perfectly.

source of the example

---

---

The box-shadow property allows you to create multiple shadows, just separate them with a comma, and therein lies its power and versatility. In addition, we realized from the start that only with basic use we can create beautiful effects only with CSS code, leaving behind obsolete techniques and gaining in performance.

see this example:

body {
  font-size: 5px;
  background-color: #64ccf7;
}

#mario8bits {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  background-color: #df2516;
  box-shadow: 1em 0 0 #df2516, 2em 0 0 #df2516, 3em 0 0 #df2516, 4em 0 0 #df2516, 5em 0 0 #df2516, 6em 0 0 #df2516, 9em 0 0 #ecbd8f, 10em 0 0 #ecbd8f, 11em 0 0 #ecbd8f, -1em 1em 0 #df2516, 0 1em 0 #df2516, 1em 1em 0 #df2516, 2em 1em 0 #df2516, 3em 1em 0 #df2516, 4em 1em 0 #df2516, 5em 1em 0 #df2516, 6em 1em 0 #df2516, 7em 1em 0 #df2516, 8em 1em 0 #df2516, 9em 1em 0 #df2516, 10em 1em 0 #ecbd8f, 11em 1em 0 #ecbd8f, -1em 2em 0 #814125, 0 2em 0 #814125, 1em 2em 0 #814125, 2em 2em 0 #ecbd8f, 3em 2em 0 #ecbd8f, 4em 2em 0 #ecbd8f, 5em 2em 0 #ecbd8f, 6em 2em 0 #050c12, 7em 2em 0 #ecbd8f, 9em 2em 0 #df2516, 10em 2em 0 #df2516, 11em 2em 0 #df2516, -2em 3em 0 #814125, -1em 3em 0 #ecbd8f, 0 3em 0 #814125, 1em 3em 0 #814125, 2em 3em 0 #ecbd8f, 3em 3em 0 #ecbd8f, 4em 3em 0 #ecbd8f, 5em 3em 0 #ecbd8f, 6em 3em 0 #050c12, 7em 3em 0 #ecbd8f, 8em 3em 0 #ecbd8f, 9em 3em 0 #ecbd8f, 10em 3em 0 #df2516, 11em 3em 0 #df2516, -2em 4em 0 #814125, -1em 4em 0 #ecbd8f, 0 4em 0 #814125, 1em 4em 0 #814125, 2em 4em 0 #814125, 3em 4em 0 #ecbd8f, 4em 4em 0 #ecbd8f, 5em 4em 0 #ecbd8f, 6em 4em 0 #ecbd8f, 7em 4em 0 #050c12, 8em 4em 0 #ecbd8f, 9em 4em 0 #ecbd8f, 10em 4em 0 #ecbd8f, 11em 4em 0 #df2516, -2em 5em 0 #814125, -1em 5em 0 #814125, 0 5em 0 #ecbd8f, 1em 5em 0 #ecbd8f, 2em 5em 0 #ecbd8f, 3em 5em 0 #ecbd8f, 4em 5em 0 #ecbd8f, 5em 5em 0 #050c12, 6em 5em 0 #050c12, 7em 5em 0 #050c12, 8em 5em 0 #050c12, 9em 5em 0 #050c12, 10em 5em 0 #df2516, 0 6em 0 #ecbd8f, 1em 6em 0 #ecbd8f, 2em 6em 0 #ecbd8f, 3em 6em 0 #ecbd8f, 4em 6em 0 #ecbd8f, 5em 6em 0 #ecbd8f, 6em 6em 0 #ecbd8f, 7em 6em 0 #ecbd8f, 8em 6em 0 #ecbd8f, 9em 6em 0 #df2516, 10em 6em 0 #df2516, -3em 7em 0 #df2516, -2em 7em 0 #df2516, -1em 7em 0 #df2516, 0 7em 0 #df2516, 1em 7em 0 #df2516, 2em 7em 0 #4a4dd0, 3em 7em 0 #df2516, 4em 7em 0 #df2516, 5em 7em 0 #df2516, 6em 7em 0 #df2516, 7em 7em 0 #4a4dd0, 8em 7em 0 #df2516, 9em 7em 0 #df2516, 12em 7em 0 #814125, -5em 8em 0 #ecbd8f, -4em 8em 0 #ecbd8f, -3em 8em 0 #df2516, -2em 8em 0 #df2516, -1em 8em 0 #df2516, 0 8em 0 #df2516, 1em 8em 0 #df2516, 2em 8em 0 #df2516, 3em 8em 0 #4a4dd0, 4em 8em 0 #df2516, 5em 8em 0 #df2516, 6em 8em 0 #df2516, 7em 8em 0 #df2516, 8em 8em 0 #4a4dd0, 11em 8em 0 #814125, 12em 8em 0 #814125, -5em 9em 0 #ecbd8f, -4em 9em 0 #ecbd8f, -3em 9em 0 #ecbd8f, -2em 9em 0 #df2516, -1em 9em 0 #df2516, 0 9em 0 #df2516, 1em 9em 0 #df2516, 2em 9em 0 #4a4dd0, 3em 9em 0 #4a4dd0, 4em 9em 0 #4a4dd0, 5em 9em 0 #4a4dd0, 6em 9em 0 #4a4dd0, 7em 9em 0 #4a4dd0, 8em 9em 0 #f9e721, 9em 9em 0 #4a4dd0, 10em 9em 0 #4a4dd0, 11em 9em 0 #814125, 12em 9em 0 #814125, -4em 10em 0 #ecbd8f, -1em 10em 0 #4a4dd0, 0 10em 0 #df2516, 1em 10em 0 #4a4dd0, 2em 10em 0 #4a4dd0, 3em 10em 0 #f9e721, 4em 10em 0 #4a4dd0, 5em 10em 0 #4a4dd0, 6em 10em 0 #4a4dd0, 7em 10em 0 #4a4dd0, 8em 10em 0 #4a4dd0, 9em 10em 0 #4a4dd0, 10em 10em 0 #4a4dd0, 11em 10em 0 #814125, 12em 10em 0 #814125, -3em 11em 0 #814125, -2em 11em 0 #814125, -1em 11em 0 #814125, 0 11em 0 #4a4dd0, 1em 11em 0 #4a4dd0, 2em 11em 0 #4a4dd0, 3em 11em 0 #4a4dd0, 4em 11em 0 #4a4dd0, 5em 11em 0 #4a4dd0, 6em 11em 0 #4a4dd0, 7em 11em 0 #4a4dd0, 8em 11em 0 #4a4dd0, 9em 11em 0 #4a4dd0, 10em 11em 0 #4a4dd0, 11em 11em 0 #814125, 12em 11em 0 #814125, -4em 12em 0 #814125, -3em 12em 0 #814125, -2em 12em 0 #814125, -1em 12em 0 #4a4dd0, 0 12em 0 #4a4dd0, 1em 12em 0 #4a4dd0, 2em 12em 0 #4a4dd0, 3em 12em 0 #4a4dd0, 4em 12em 0 #4a4dd0, -4em 13em 0 #814125, -3em 13em 0 #814125, -5em 15em 0 #5cb0d3, -4em 15em 0 #5cb0d3, -3em 15em 0 #5cb0d3, -2em 15em 0 #5cb0d3, -1em 15em 0 #5cb0d3, 0 15em 0 #5cb0d3, 1em 15em 0 #5cb0d3, 2em 15em 0 #5cb0d3, 3em 15em 0 #5cb0d3, 4em 15em 0 #5cb0d3, 5em 15em 0 #5cb0d3, 6em 15em 0 #5cb0d3, 7em 15em 0 #5cb0d3, 8em 15em 0 #5cb0d3, 9em 15em 0 #5cb0d3, 10em 15em 0 #5cb0d3, 11em 15em 0 #5cb0d3, 12em 15em 0 #5cb0d3, -3em 16em 0 #5cb0d3, -2em 16em 0 #5cb0d3, -1em 16em 0 #5cb0d3, 0 16em 0 #5cb0d3, 1em 16em 0 #5cb0d3, 2em 16em 0 #5cb0d3, 3em 16em 0 #5cb0d3, 4em 16em 0 #5cb0d3, 5em 16em 0 #5cb0d3, 6em 16em 0 #5cb0d3, 7em 16em 0 #5cb0d3, 8em 16em 0 #5cb0d3, 9em 16em 0 #5cb0d3, 10em 16em 0 #5cb0d3;
}

<div id="mario8bits"></div>

codepen