[css-boxmodel] Totally missing one logical element.

[Array23]

Hello, I want to say, that you all did great job, on what web is today...
But I'm missing one thing as coder of webdesigns, that thing is simple css...

Inner Border
It's inner-borderattribute, as it states, that would be border, between padding and total size of box.
I want way to borders to not stack up in total size of element, because then I need to use calc() on basically everything.

I'm already working on polyfill, that takes whole css, and where i have --inner-border it wraps it to have height defined as calc(height -border);

#formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; }

This is what I've found on Mozilla, if I put 6 pieces of something like this, there would be overflow, because of 1px border...

But that won't make it part of something, official, I think two borders are no big issue, to be solved out...
Keep the original border doing what it is doing, and add inner border between padding and size on box model.

Sorry if this is not an 'issue' for you, but It makes coding of certain designs much more simple.

What's non-member patent licencing commitment? Can you explain? If you have no soul just steal this and implement it, otherwise explain to me how to fill for 'patent'. I'm struggling with issues about intellectual property.

Outer Padding
Also we could apply outer-padding which would be space between inner-border and padding...

Edge
And there could be a property of 'edge' which would apply on total edges of whole box(not containing original border)...

So I could set up an height and width of edge, and load for example image or svg into it like into a background.

It could be set up, so content would start after padding, or after edge, if edge overflowed, but preferred option it would be where the padding starts...

I'm working on some JavaScript that will work like this, but maybe a week it will be done, I just wanted to you to be aware of this by the October 30.

Why?

Just to create by pure html and css, without unnecessary JavaScript interface, where edges of elemets are dots and are connected to each other by line...

It can be done with more boxes, and a bunch of calc() but this seems to be better solution...

box-fill
I think in backend, there is something, that fills those boxes, it would fill the whole box, by it's size defined by size, and inner border would be overlay...

Also if I could make multiple layers of this box fill and merge them like I can do when I overlay individual divs like layers in gimp, would be very reasonable for easy to make irregular background, because I know everybody is being tired of simple patterns or just one color... I want to achieve something like irregular noise on the background. With this it wouldn't be that much for processor as overlaying multiple boxes I think.

It's better to do it once, and for all than every time somebody needs that

Even thou I have possibility of writing JavaScript for everything I said and do multiple boxes, I think it's good if it would be just standing in basic definition viable for everybody...

[frivoal]

I wonder if the combination of one thing that already exists and one thing we decided to add (but haven't done yet) would solve most of your needs for inner borders and outer paddings:

• Thing that exists: box-sizing: border-box. With it width and height apply to outside of the border, instead of inside of the padding, solving your problems about needing calc everywhere.
• Thing that's been agreed to but not done yet: multiple borders. If you want to add some padding outside the border, you could also add a white (or transparent, or whatever is appropriate) second border after the first one.

---

PS: I do not understand your proposal for edge and for box-fill

PS2: box-fill seems unrelated to the rest. Filling separate issues is usually better.

PS3: "I just wanted to you to be aware of this by the October 30". Thank you for the heads up. However, you should be aware that standardization groups like this one tend to make progress quite slowly. Things are more often measured in years than in weeks.

[Array23]

That box-sizing: border-box really solve lot of issues...

I meant, corners... Just called it edge... Custom graphical/computation borders, i.e. making transparent triangle.

Actually it could be that

box-levels-inner: corner(left-top(layer(),layer(),),right-bottom(layer)), border(1px solid #fff), padding(xxx));
box-levels-outer: border(1px solid #eee);

With n number of paddings and borders... Because it's simple to array something and shift it while you are nesting inside of object so much, that it would be possible to do that.

Setting of border or padding with old CSS rules would set that layer, i.e. first padding, and it would be defaultly after first border.

[Crissov]

Just to be sure, are you looking for the outline properties?

[SebastianZ]

Like to @Crissov, it sounds like the main use case is already covered by the outline-* properties.

• Thing that's been agreed to but not done yet: multiple borders. If you want to add some padding outside the border, you could also add a white (or transparent, or whatever is appropriate) second border after the first one.

This is now in the spec. for border-color as well as outline-color.

As @frivoal mentioned, please file separate issues for anything additional besides the inner borders feature!

Because @Array23 seems to have solved their issue on their own back then and there was no response to the comments nor any activity on GitHub by @Array23 for the past few years, I am going to close this issue. @Array23 Feel free to reopen it if you think we're missing something. In that case, it would be great if you provided some screenshot or mockup of what you were trying to achieve.

Sebastian