Option to set border positioning

#1

If I set a box with a black border and a child with a white fill, it overlaps the border of the parent and hides the effect. Setting box-sixing / border-positioning might solve it?

Thoughts on layout
#2

As a temporary fix, I did find that you can set padding on the parent to height of your border and that works for now.

#3

@martincreative This is the intended behavior. We erred on the side of children being visible. If an element is hidden or partially obscured behind the border of it's parent, it's often not clear what exactly is happening.

On the other hand, as you discovered, there's an easy workaround to explicitly specify this behavior using padding. Another workaround would be to create a 0/0/0/0 child freeform element with a border, and make sure it's on top of all its sibilings.

Zooming out a bit, border positioning is an interesting detail; one of those things that seems pretty simple, but actually raises a bunch of questions.

Traditional drawing apps usually have an option for positioning: inside, outside, or center. If you pick "center" or "outside," the element's total width doesn't reflect that. Example: a 100px wide box with a 10px outside border still reports as being 100px, not 120px. Is that ideal?

The web/CSS also doesn't have an explicit border positioning property:

  • You can set box-sizing: border-box; to include borders in the element's total size (essentially: inside).
  • The default box-sizing: content-box means the border size is in addition to the element's size, so a width: 100px; div with border-width: 10px; actually reports as being 120px wide.
  • There's no center alignment option without ugly hacks.

iOS' UIViews are even more restricted in terms of border handling: http://stackoverflow.com/questions/15184133/add-a-border-outside-of-a-uiview-instead-of-inside

If we want to preserve high-quality CSS export, things in Subform should probably map well to CSS. (Sketch, for example, just punts on this issue: it exports border: 10px solid red; and ignores that you specified "inside" or "center".) Is export integrity more important than more nuanced visual control in the design tool?

And beyond just border alignment:

  • What about border styles like dashes and dots? CSS also doesn't do these.
  • What about multiple borders? How do those position and z-index?

Whatever we ultimately settle on, it also needs to work well in the context of the layout engine. If a border is affecting the positioning of elements, it should be clear how it's happening.

#4

I really appreciate how thorough you guys are thinking through these features, keep it up!