[css-backgrounds] border-position

# Benjamin De Cock (7 months ago)

Hello,

Has a border-position property (or similar) ever been considered? I couldn't find any discussion about it so, please let me know if I'm missing something!

Plausible use cases out of my head:

  1. Centering the border. With tools like Illustrator and Sketch displaying the border by default at the center (presumably for SVG), it's often necessary to redraw/resize/realign the layers aimed at being implemented in CSS in order to account for the different border positioning method. Additionally, some border effects are simply not possible today in CSS because of the lack of proper centering (as in, border + outline isn't a reasonable hack).

  2. While box-sizing can emulate a potential border-position: inside, the mental model of these properties are radically different, and I tend to think designers would find the latter much more natural.

Thanks, Ben

Contact us to advertise here
# fantasai (a month ago)

On 03/07/2017 05:31 AM, Benjamin De Cock wrote:

Hello,

Has a border-position property (or similar) ever been considered? I couldn't find any discussion about it so, please let me know if I'm missing something!

Hi! I've never encountered such a proposal. There is such a proposal for SVG strokes, though.

Plausible use cases out of my head:

  1. Centering the border. With tools like Illustrator and Sketch displaying the border by default at the center (presumably for SVG), it's often necessary to redraw/resize/realign the layers aimed at being implemented in CSS in order to account for the different border positioning method. Additionally, some border effects are simply not possible today in CSS because of the lack of proper centering (as in, border + outline isn't a reasonable hack).

  2. While box-sizing can emulate a potential border-position: inside, the mental model of these properties are radically different, and I tend to think designers would find the latter much more natural.

One of the key differences here is that the border in CSS takes up space. It does this so that it doesn't overlap other content-- the browser can ensure enough space where needed, and the author doesn't have to adjust margins/padding every time s/he adjusts the border width. This is good behavior for a layout tool.

Illustrator and Sketch are drawing tools, so they would output SVG shapes, not CSS boxes, in which case the 'stroke' property is used, and that centers on the boundary as you expect.

Given that, I'm not really sure CSS needs a border-position. Could be convinced otherwise, but it'd need more specific examples of where it's needed. :)

~fantasai

# Benjamin De Cock (17 days ago)

On Thu, Sep 21, 2017 at 6:39 PM, fantasai fantasai.lists@inkedblade.net

wrote: >

One of the key differences here is that the border in CSS takes up space. It does this so that it doesn't overlap other content-- the browser can ensure enough space where needed, and the author doesn't have to adjust margins/padding every time s/he adjusts the border width. This is good behavior for a layout tool.

Illustrator and Sketch are drawing tools, so they would output SVG shapes, not CSS boxes, in which case the 'stroke' property is used, and that centers on the boundary as you expect.

Given that, I'm not really sure CSS needs a border-position. Could be convinced otherwise, but it'd need more specific examples of where it's needed. :)

~fantasai

Thanks for clarifying! I guess I don't really have more specific examples, it really is just a nice thing to have in the authoring process. And as much as I conceive the theoretical difference between a drawing and a layout tool, the fact is that they're closely related in the way we build web interfaces.

# Brad Kemper (15 days ago)

On Oct 3, 2017, at 3:42 AM, Benjamin De Cock ben@stripe.com wrote:

On Thu, Sep 21, 2017 at 6:39 PM, fantasai fantasai.lists@inkedblade.net wrote: One of the key differences here is that the border in CSS takes up space. It does this so that it doesn't overlap other content-- the browser can ensure enough space where needed, and the author doesn't have to adjust margins/padding every time s/he adjusts the border width. This is good behavior for a layout tool.

Illustrator and Sketch are drawing tools, so they would output SVG shapes, not CSS boxes, in which case the 'stroke' property is used, and that centers on the boundary as you expect.

Given that, I'm not really sure CSS needs a border-position. Could be convinced otherwise, but it'd need more specific examples of where it's needed. :)

~fantasai

Thanks for clarifying! I guess I don't really have more specific examples, it really is just a nice thing to have in the authoring process. And as much as I conceive the theoretical difference between a drawing and a layout tool, the fact is that they're closely related in the way we build web interfaces.

Yeah, the border box is always going to be outside the padding box, and ��box-sizing�� will combine with things like ��width�� (or ��max-width��, ��flex-basis��, etc.) to determine the dimensions of the border box, which then leads to how much space is used for layout.

However, it would be possible to have something like ��border-image-offset�� to shift the ink of the line without changing layout. I could see ��border-offset�� being similar to that, but shifting the border ink (as determined by border-style and border-width) instead of an image. Because it could cause overlapping with existing content, you��d have to be careful with margin and padding, and it probably wouldn��t be your default way of designing layouts. But I could see that being very useful if we ever get a feature for doing multiple, overlapping borders.

# Benjamin De Cock (7 days ago)

On Wed, Oct 4, 2017 at 10:13 PM, Brad Kemper brad.kemper@gmail.com wrote: >

Yeah, the border box is always going to be outside the padding box, and ‘box-sizing’ will combine with things like ‘width’ (or ‘max-width’, ‘flex-basis’, etc.) to determine the dimensions of the border box, which then leads to how much space is used for layout.

However, it would be possible to have something like ‘border-image-offset’ to shift the ink of the line without changing layout. I could see ‘border-offset’ being similar to that, but shifting the border ink (as determined by border-style and border-width) instead of an image. Because it could cause overlapping with existing content, you’d have to be careful with margin and padding, and it probably wouldn’t be your default way of designing layouts. But I could see that being very useful if we ever get a feature for doing multiple, overlapping borders.

Yeah I really like that, and I agree it'd be extremely useful/powerful! Elika: any thoughts on this?

# fantasai (3 days ago)

On 10/13/2017 03:54 AM, Benjamin De Cock wrote:

On Wed, Oct 4, 2017 at 10:13 PM, Brad Kemper <brad.kemper@gmail.com <mailto:brad.kemper@gmail.com>> wrote:

Yeah, the border box is always going to be outside the padding box, and ‘box-sizing’ will combine with things like ‘width’
(or ‘max-width’, ‘flex-basis’, etc.) to determine the dimensions of the border box, which then leads to how much space is
used for layout.

However, it would be possible to have something like ‘border-image-offset’ to shift the ink of the line without changing
layout. I could see ‘border-offset’ being similar to that, but shifting the border ink (as determined by border-style and
border-width) instead of an image. Because it could cause overlapping with existing content, you’d have to be careful with
margin and padding, and it probably wouldn’t be your default way of designing layouts. But I could see that being very
useful if we ever get a feature for doing multiple, overlapping borders. 

Yeah I really like that, and I agree it'd be extremely useful/powerful! Elika: any thoughts on this?

I'd want to see examples that show why this is a significantly better approach than what we currently have, for some substantial number of use cases. :)

The current approach has the benefit that you don't get overlapping content (unless you ask for it explicitly with negative margins). If we add this feature, we lose that safety.

Also, adding features always has a cost, so we have to balance the benefits of spending that effort here vs elsewhere.

~fantasai

# Brad Kemper (3 days ago)

On Oct 16, 2017, at 6:42 PM, fantasai fantasai.lists@inkedblade.net wrote:

On 10/13/2017 03:54 AM, Benjamin De Cock wrote: On Wed, Oct 4, 2017 at 10:13 PM, Brad Kemper <brad.kemper@gmail.com <mailto:brad.kemper@gmail.com>> wrote: Yeah, the border box is always going to be outside the padding box, and ��box-sizing�� will combine with things like ��width�� (or ��max-width��, ��flex-basis��, etc.) to determine the dimensions of the border box, which then leads to how much space is used for layout. However, it would be possible to have something like ��border-image-offset�� to shift the ink of the line without changing layout. I could see ��border-offset�� being similar to that, but shifting the border ink (as determined by border-style and border-width) instead of an image. Because it could cause overlapping with existing content, you��d have to be careful with margin and padding, and it probably wouldn��t be your default way of designing layouts. But I could see that being very useful if we ever get a feature for doing multiple, overlapping borders. Yeah I really like that, and I agree it'd be extremely useful/powerful! Elika: any thoughts on this?

I'd want to see examples that show why this is a significantly better approach than what we currently have, for some substantial number of use cases. :)

The current approach has the benefit that you don't get overlapping content (unless you ask for it explicitly with negative margins). If we add this feature, we lose that safety.

Also, adding features always has a cost, so we have to balance the benefits of spending that effort here vs elsewhere.

~fantasai

Apparently, what we have regarding multiple borders is a note in an editor��s draft saying we are working on them.

drafts.csswg.org/css-backgrounds-4/#level-changes

Is there a blog post or something that suggests a syntax and how it would work?

With border-image, authors already have the ability to push borders outside the safety net when they want to knowingly choose to. I think it would be useful to bring that ability to regular borders. The way I envision it, the safety net would still be there for multiple borders that were not shifted in or out.

But yeah, I will try to post some samples when I get a chance.

Want more features?

Request early access to our private beta of readable email premium.