Search code examples
cssborder

Is there a way to make a custom border in CSS?

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.

enter image description here

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;
}

Here's what it looks like when run:

enter image description here

Is there any way to make custom borders?

Solution

  • SVG elements have the stroke-dasharray property, which can be used to make custom borders like that (in an svg).

    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
    <rect x="0" y="0" width="100" height="100" fill="transparent" stroke="black" stroke-width="4px" stroke-dasharray="16 2 2 2" />
</svg>

    in the above example all the sizes are hard coded, but they don't need to be. if you write an svg like this

    <svg xmlns="http://www.w3.org/2000/svg" >
    <rect x="0%" y="0%" width="100%" height="100%" fill="transparent" stroke="black" stroke-width="4px" stroke-dasharray="16 2 2 2" />
</svg>

    you can then use it as a background image in your html, and it will scale to fill whatever container you put it in.

    to use it as a background image you can you can just save the svg file somewhere and reference it from your css the same way you would with any other image, or you can turn the svg into a data url (this tool is useful for that).

    .demo_box {
  width: 300px;
  height: 80px;
}
.custom_svg_border {
  /* this border won't actually take up any space since it's a background image, so add some extra padding to account for that */
  padding: 2px;
  /* background-image: url("foo/bar/custom_border.svg"); */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0%25' y='0%25' width='100%25' height='100%25' fill='transparent' stroke='black' stroke-width='4px' stroke-dasharray='16 2 2 2' /%3E%3C/svg%3E");
}
    <div class="custom_svg_border demo_box">
  hello world
</div>