I was given this word document as a reference for what they want made into a ReactJS app (they didn't specify the language but that's ultimately what ended up being the thing I both knew and was most convenient). I am having no trouble making everything they asked for except for this one specific thing which is a border of a specific style.
This image is an example of the border they're looking for.

I can figure out how to make a dotted border and a dashed one but not one going between one and the other. Here's my CSS code so far:

.instructions {
  border-style: dashed;
  border-width: 2px;
  margin-right: 100px;
  box-sizing: border-box;
  padding: 10px;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here's what it looks like when run

Is there any way to make custom borders?

CodePudding user response：

It's impossible to do it with just css and, if possible, it will also be very hard to achieve with javascript.

Notice that if you get close, text with hypehns and dots won't be aligned vertically... It won't be aligned also if you use underscore.

Using an image as border is the way to go as they have already told you.

Asuming you still want to try this is what I would do as a start... good luck transforming the example with javascript, if you can you'll have quite a nice sucesfull career ahead:

* {box-sizing:border-box;}
.border-container {
  position:relative;
  width:500px;
  height:200px; 
  margin:0 auto;
}
.border-container:after {
  content:'_ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ .';
  overflow:hidden;
  width:100%;
  display:blocK;
  position:absolute;
  top:-18px;
  left:0;
  white-space:nowrap;
}
.border-container:before {
  content:'_ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ .';
  overflow:hidden;
  width:100%;
  display:blocK;
  position:absolute;
  bottom:0;
  left:0;
  white-space:nowrap;
}
.border-left {
  overflow: hidden;
    display: blocK;
    position: absolute;
    top: -20px;
    left: 0;
    white-space: nowrap;
    transform: rotate(90deg);
    width: 200px;
    transform-origin: bottom left;
}
.border-right {
  overflow: hidden;
    display: blocK;
    position: absolute;
    top: -20px;
    right:0;
    white-space: nowrap;
    transform: rotate(-90deg);
    width: 200px;
    transform-origin: bottom right;
}

<div class="border-container">
  <div class="border-left">
  _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ .
  </div> 
   <div class="border-right">
  _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ . _ .
  </div> 
 
</div> 

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The closest thing i got for you is this

     .instructions {
        width: 200px;
        height: 200px;
        left: 35px;
        top: 35px;
        position: absolute;
        background-color: lightblue;
        border: dashed 3px black;
      }
      .instructions::after {
        content: "";
        width: 100%;
        height: 100%;
        left: -3px;
        top: -3px;
        position: absolute;
        border: dotted 3px black;
      }

<div class="instructions">content</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note that all three values border-width, top,and left need to be the same. for example if your border-width is 5px your top and left need to be set at -5px