[css-borders-4] corner-shape `angle` vs `bevel`

[jsnkuhn]

Seems like the name for this type of corner has gone back and forth from bevel to angle and now back to bevel over time but I can't find any actually public conversation about why these changes were made just that they were. So some thoughts:

• Potential the thinking is reuse bevel from SVG's stroke-linejoin="bevel". Although I'm not entirely sure that the corner-shape use is the same as what stroke-linejoin is doing?

• Apparently in wood/medal working bevel is technically reserved for angles that cover the entire height or width of an object.

"A bevel refers to an angled cut that connects two parallel surfaces of a part."

The technically correct term for what we want here I guess is "chamfer". To be clear I'm not suggesting we use "chamfer" as a value. Don't think that most folks will know what it means (the default spell check doesn't seem to know what it is either). But it makes it clear that bevel is probably not the technically correct name for what that's worth.

source: https://www.madearia.com/blog/chamfer-vs-bevel/

• angle seems more straightforward to me. It's a word that everyone is already familiar with I'm not sure if bevel is as familiar to folks?

• In my playing around with corner shape I've already accidentally written the word angle for the value a number of times and it's taken a bit for me to realize that was my mistake. In all honestly i've also misspelled it as angel a few times.

• with angle is will devs think they can use css values with it. As in: "where do I say I want a 42deg angle" which is not how corner shape works.

@noamr

[noamr]

Seems like the name for this type of corner has gone back and forth from bevel to angle and now back to bevel over time but I can't find any actually public conversation about why these changes were made just that they were.

See this resolution: #10993 (comment)
Though it's not a very thorough discussion on the matter.

So some thoughts:

• Potential the thinking is reuse bevel from SVG's stroke-linejoin="bevel". Although I'm not entirely sure that the corner-shape use is the same as what stroke-linejoin is doing?

It's very similar visually. A sloped/angled line between the edges is a bevel.

"A bevel is a sloped/angled surface following an edge. It is formed by cutting or grinding the material at an angle other than 90°" (https://www.xometry.com/resources/machining/bevel/)

• with angle is will devs think they can use css values with it. As in: "where do I say I want a 42deg angle" which is not how corner shape works.

This is my reasoning for opposing angle. "Angle" doesn't necessarily mean a straight angle. 90 degrees is also an angle.
Bevel is very specifically and distinctly a sloped angle between two edges, which accurately describes the effect of superellipse(0).

[jsnkuhn]

• All I see at [css-shapes-2][css-borders-4] corner-shape support for superellipses #10993 (comment) on the subject is this which is not helpful:

florian: current draft has angle rather than bevel
TabAtkins: editor discretion seems fine
[general agreement]

• can definitely agree that both notch and square are 90deg angles. So can see the lean away from angle there.

• Also seems possible that there might be different definitions for terms like bevel maybe depending on 2d vs 3d rendering?

[noamr]

• All I see at [css-shapes-2][css-borders-4] corner-shape support for superellipses #10993 (comment) on the subject is this which is not helpful:

florian: current draft has angle rather than bevel
TabAtkins: editor discretion seems fine
[general agreement]

Yea, and as editor I proposed bevel and it was part of the resolution :) but granted it wasn't much of a meaningful discussion.

• Also seems possible that there might be different definitions for terms like bevel maybe depending on 2d vs 3d rendering?

In 3d rendering bevel is something more general referring to the smoothing of a corner.

[noamr]

@SebastianZ @LeaVerou @fantasai @smfr @bramus @tabatkins @yisibl does anyone else resonate with the points here?
I want to see if there is enough energy behind changing from bevel to bring this to the WG.

[LeaVerou]

Agreed that angle is much more straightforward. I see the reasoning behind bevel, but I don't think any of these references are strong enough with the average CSS author to drive naming. Also, angle works much better for describing the extremes of this (e.g. diamond shapes, pararellograms etc). Strong +1 for changing it, thanks for raising this!

[smfr]

angle maybe implies that you can control the angle by specifying a unit in degrees, radians etc? bevel seems more appropriate here. Another option would be chamfer but that's possibly too obscure for non-English speakers.

[fantasai]

I agree with the logic in Noam's comment above.

[yisibl]

As it happens I also use 3D software, and I don't think it's appropriate to move the concept of 3D design to CSS. And, in Autodesk Fusion it is called chamfer.

I agree with @smfr, it's too hard to understand for non-English or even non-3D practitioners.

If it's renamed to angle, then CSS authors will be confused as to why an angle can't be defined.

[noamr]

As it happens I also use 3D software, and I don't think it's appropriate to move the concept of 3D design to CSS. And, in Autodesk Fusion it is called chamfer.

We already use bevel in CSS (albeit not in a shipped feature): https://drafts.fxtf.org/fill-stroke-3/#valdef-stroke-linejoin-bevel
It means the same thing as corner-shape: bevel (a 45deg angle).

I think the inspiration here is not from 3D graphics, but rather from carpentry, where a bevel is (usually) a 45deg angled cut.

[SebastianZ]

Sorry for not replying earlier!
I digged through the history of the draft. And it looks like we previously explicitly resolved to rename bevel to angle. From the discussion there it's not totally clear why the rename was suggested. Though I also prefer angle over bevel, as it is more commonly known, even if it might technically not be totally correct. And as it is a keyword like the others, I don't see a source for confusion regarding angles in the sense of degrees.
Having said that, I don't have a strong opposition against bevel.

Sebastian

[noamr]

Another existing use of bevel in the web platform: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin#bevel

[LeaVerou]

@astearns wrote:

(Proposing to close with no change, should be a quick one hopefully)

Given @SebastianZ’s comment:

I digged through the history of the draft. And it looks like we previously explicitly resolved to rename bevel to angle.

Would "no change" mean we resolve to call it bevel or angle? 🤔
(+1 to angle fwiw)

[noamr]

@astearns wrote:

(Proposing to close with no change, should be a quick one hopefully)

Given @SebastianZ’s comment:

I digged through the history of the draft. And it looks like we previously explicitly resolved to rename bevel to angle.

Would "no change" mean we resolve to call it bevel or angle? 🤔
(+1 to angle fwiw)

Well it's bevel currently so that would be my proposal, also its consistent with a very similar term on canvas.

But resolving on either would be fine.