How to create dashed div borders like on the image here

Question

basically, I would like for each of these 4 boxes to be a div and then have a class preferably for each type of border to create a border with that kind of shadow or something

But I have no clue where to start except create a border

The borders in your ""design"" are inconsistent. Out of curiosity, who told you to make them? — Roko C. Buljan, Jun 15 '19 at 19:45
@RokoC.Buljan sometime customers produce inconsistent specifications — Jester, Jun 16 '19 at 13:18

score 1 · Accepted Answer · answered Jun 15 '19 at 19:24

I'm not sure if there's a way to do this with the literal border attribute in CSS, but with a little fanagling, you could wrap that div in another div which uses the repeating gradient property as such:

.wrap {
  background: repeating-linear-gradient( 45deg, black, black 5px, white 5px, white 10px);
  
  border: 1px solid black;

  display: flex;
  justify-content: center;
  align-items: center;
}

.real {
  background-color: white;

  border:1px solid black;

  width: 100%;
  height: 100%;
  margin: 15px;
}

<div class="wrap">
  <div class="real">
    <p>Sup</p>
  </div>
</div>

Where you can change the margin around the inner div to replicate increase border size and you can mess around with the values in the repeating-linear-gradient property to increase amount of lines shown and their color.

worked like a charm, thank you – Jester Jun 17 '19 at 15:08 — Jester, Jun 17 '19 at 15:08

score 0 · Answer 2 · answered Jun 15 '19 at 19:39

0

You can play with the gradient percentages to get what you want

.border-box {
    position: relative;
    width: 25rem;
    height: 20rem;
    box-sizing: border-box;
    border: 2rem solid transparent;
    border-image: repeating-linear-gradient(to right top, black 10%, white 11%) 15%;
}

 <div class="border-box"></div>

answered Jun 15 '19 at 19:39

baao

71,625
17
143
203

better use the value of the slice the same as the border to have a good result .. in your case 2rem = 2*16 = 30 : https://jsfiddle.net/vg0n15cm/ – Temani Afif Jun 15 '19 at 19:51

How to create dashed div borders like on the image here

2 Answers2