How to have more than one border in an element with CSS

Question

How to have more than one border in an element with CSS

Navigation

#1 by (6 votes)
#2 by (5 votes)
#3 by (3 votes)

7

I have an element, but I wanted it to have multiple edges. I did not want to have to use multiple divs for this ... I wanted something around 10 to 8 borders.

Is there any more practical way of putting more than a border and an element?

Example of what I do not 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>

css css3

asked by anonymous 16.10.2018 / 19:51

3 answers

6

The box-shadow property allows you to attach one or more shadows to an element. The shadow style chosen for this demonstration is inset , which refers to the insertion idea. Thus the shadow is placed inside the frame. As for the other configurations:

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)

Settings may be different, so support link .

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #fff;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #000FFF,
    inset 0 0 0 8px #FF00FF,
    inset 0 0 0 12px #FFF000,
    inset 0 0 0 16px #bbbFFF,
    inset 0 0 0 20px #aa000a,
    inset 0 0 0 20px #99F0F9,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}

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

Response extracted from: StackOverflow
User: Terry

16.10.2018 / 20:14

3

Box-shadow is a CSS property, which is used to add shadow effects around an element.

Default syntax for this property:

box-shadow:

horizontal / vertical offset - these two values correspond to the x and y axes respectively, and allow shading to be positioned
blur - lets you apply a blur to the shading, such as Photoshop's gaussian blur
spread - defines how much we will expand or contract (negative values) our shading
color - will obviously set 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>

Browser Compatibility

Old browsers do not have much support for CSS3, but if you're using upgraded browsers, it will work perfectly.

sample source

The box-shadow property allows you to create multiple shadows by simply separating them with a comma, and that is where your power and versatility reside. In addition we realized at the outset that only with the basic use we can already create beautiful effects with only 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

16.10.2018 / 20:16

What is the difference between $ var = function () and function var ()? Application of the assign function in loops

score 5 · Accepted Answer

As you yourself have quoted we have the possibility to do using div s, but preferably I think that the less HTML #

Multiple edges with pseudo-elements

To make double or triple borders you can use pseudo-elements, it's a bit more annoying to do, but it has more browser support for using well-known properties. Here's 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 border, as shown. Actually we're kind of doing a gambiarra (but that works: D). What happens is that we are taking an element, a div and applying a before and a after that will have an absolute position with respect to the element itself element and with a displacement for all sides greater than the applied edge . From this displacement we apply a background, which would be the color of its border.

Multiple borders with box-shadow

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

Box-shadow is a CSS property, it is used to add effects around an element. You can specify more of an effect, separating them with commas. A box-shadow is described by the displacements (offset) X and Y in relation to the element, ray spread and color.

Only the definition helps a lot to understand the property (but nothing better than an example to clarify 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, box-shadow gave to understand, it has been applying a shadow to the element several times, which allows us to make the border that is necessary, of any size (imagination is the limit).

Within this box-shadow we are using spread-radius, which defines the size of the shadow. It is important to note that positive values increase the shadow, and negative values decrease. See this pen that helps you better understand.

But the question worth 1 million dollars is: what is this hsl used?

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

Show, you can already say that you already know two techniques, but have more? Yes, it has the technique of writing several% s of% s, as in the question, and another more limited technique using div , a property that few know about.

Multiple borders with outline

The outline by definition is used to set one or more of the outline-style, outline-width, and outline-color outline properties. You can see more about the here property. After the brief introduction we will 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 with the first one, using pseudo-elements, to apply more borders. I think it's a very interesting but limited alteration of outline .