How to have more than one Border on an Element with CSS

Question:

I have an element, but I wanted it to have multiple borders. I didn't want to have to use multiple divs for this… I wanted something around 10 to 8 edges.

Is there a more practical way to put more than one border and one 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:

The box-shadow property lets you attach one or more shadows to an element. The shadow style chosen for this demo is inset , which 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 may be different, so follow the 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>

Answer extracted from: StackOverflow
User: Terry

Post Views: 1