Home How can I create a dashed border in CSS that would be symmetric horizontally/vertically?

Questions

How can I create a dashed border in CSS that would be symmetric horizontally/vertically?

November 5, 2023

I’m designing a website in Figma, and it allows me to create an evenly spaced border, that is symmetrical – corners are all identical, and dashes are now skewed or displaced relative to each other. I want to replicate similar behavior on my website, but I wasn’t been able to find a solution that would work with adaptive UI -> the width and height of the div I want to put the border on isn’t fixed.

I have attempted to use svg, and the dashed-border generator sites, but none do achieve the desired behavior. I expected it to be a common task, with a well-developed solution, but I wasn’t able to google anything or use an AI for any working output. I have tried to export it from Figma, but none of the plugins work as well, even for static size.

>Solution :

You can try with some background and gradients. Resize the below to see the result:

.box {
  --c: red; 
  --t: 5px; /* border thickness */
 
  width: 300px;
  height: 200px;
  
  
  border: var(--t) solid #0000;
  --b1:/calc(4*var(--t)) var(--t) linear-gradient(90deg,var(--c) 25%,#0000 0 75%,var(--c) 0) border-box round no-repeat;
  --b2:/var(--t) calc(4*var(--t)) linear-gradient(      var(--c) 25%,#0000 0 75%,var(--c) 0) border-box no-repeat round;
  background:
     0 0 var(--b1),0 100% var(--b1),
     0 0 var(--b2),100% 0 var(--b2);
     
  /* to debug */
  overflow: hidden;
  resize: both;
}