Dashed borders placement: in or out of the box

#1

Has anyone dealt with dashed border placement in axure? Axure renders borders outside of the box and web browsers render them within the box. IE the background color appears between the dashes in web browsers but in Axure the border color renders against the canvas color.

If you have a dark gray box and apply a dashed border, by default on the web; that border would have to be white to be visible against the dark gray box. In Axure, white would be invisible against a white canvas.

Here’s is a codepen example.
https://codepen.io/tobewan77/pen/rNPaNNw

I can’t find a way to create this using Axure’s border element.

#2

Hi @tobewan77, if you set up the same color for the box and the border and then select the dashed option in the border settings, you should be able to achieve this effect:

34%20AM
Screen Shot 2023-10-24 at 11.02.34 AM.png2043×929 165 KB

I hope this helps!

#3

Got it. It does help.
Is there something i’m missing why it works like this? Does it correspond to a web behavior that i’m not connecting?

#4

Well, it was designed this way in Axure. However, if you think we need to add more information regarding this behavior on our official resources, I’d be more than happy to pass your feedback to our docs team!