Border radius with custom spaces between dotted

Question

I am using custom dotted style border in my div element. I have to create custom border using background because I must define spaces between dotted. But in the corners it's not displaying due to the border radius. How can I fix that or any other solution?

I want the custom border to also follow the radius.

.element {
  width: 400px;
  height: 400px;
  background: linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 20px 1px, 1px 20px;

  border-radius: 70px;
}

<div class="element">
</div>

Yes, I'm trying custom border using background because I have to change spaces between dotted. — kenzolek, Dec 12 '18 at 10:33
I think you can't fix that easily because the border-radius cuts the parts of the background were the border is rendered. — thex, Dec 12 '18 at 10:34

Temani Afif · Answer 1 · 2020-03-23T09:38:25.230

This is probably more suitable for SVG where you can easily control the border using stroke-dasharray

svg {
  width: 250px;
}

path {
  fill: none;
  stroke-dasharray: 13, 20;
}
path.more {
  fill: none;
  stroke-dasharray: 10, 30;
}
path.less {
  fill: none;
  stroke-dasharray: 25, 15;
}

<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z"  stroke="black" stroke-width="2" />
</svg>
<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z" class="more"  stroke="black" stroke-width="2" />
</svg>
<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z" class="less"  stroke="black" stroke-width="2" />
</svg>

Check this question for more ways about how to define/control the radius using SVG: SVG rounded corner

Another related question if you want to deal with a circle: How to create dashed circles with uniform spacing?

@J.Sadi yes there is a lot a ways for the SVG with border-radius but I wanted to focus on the stroke-dasharray rather the SVG. I also linked to another question where we can see all these methods ;) — Temani Afif, Dec 12 '18 at 11:14

score -2 · Answer 2 · answered Dec 12 '18 at 11:38

You could get this done using a SVG-Rectangle and stroke-dasharray like i did here:

.element {
  width: 400px;
  height: 400px;
  border-radius: 70px;
  position: relative;
}

.element svg {
  stroke-width: 0.5;
  stroke-dasharray: 10, 12;
  fill: none;
  stroke: black;
}

.element .content {
  position: absolute;
  top: 25px;
  left: 25px;
}

<div class="element">
  <svg width="400" height="400">
    <rect x="1" y="1" rx="70" ry="70" width="398" height="398">
  </svg>
  <div class="content">
    put content here...
  </div>
</div>

Border radius with custom spaces between dotted

2 Answers2

Linked

Related