Support for CSS corner-shape property

Ideas
1

Hi,

Could support for the CSS corner-shape property be added to Bootstrap Studio?

At the moment, when I use corner-shape in the CSS editor, Bootstrap Studio marks it as an invalid/incorrect property, even though it is a valid CSS property in browsers that support it (only firefox and safari doesn’t).

For example:

.card {
    border-radius: 24px;
    corner-shape: squircle;
}

It would be useful if Bootstrap Studio could recognize corner-shape as a valid CSS property and stop flagging it as an error. And also render it.

Thanks!

2

There is a practical reason Bootstrap Studio flags it. The CSS editor is designed to provide validation and visual rendering based on SUPPORTED CSS properties. Until browser support for corner-shape is considerably broader, I wouldn’t expect it to be part of BSS.

3

It’s still supported in Chrome and Edge, and it is a valid CSS property. The fact that Safari and Firefox don’t currently render it doesn’t make the property invalid.

Interestingly, Screen Studio, a macOS-focused app, uses corner-shape as well. Their user base is likely heavily Safari-based, yet they still make use of the property in production. It’s not an experimental demo or toy project, it’s a real, widely used application.

4

I didn’t write that it was invalid. I wrote that it was unsupported.

If a CSS property is not supported by a major browser (like Safari) that is used by roughly 45% of the population, it’s actually good practice for the CSS editor to flag it. It’s not stopping you from using it. It’s warning you that it’s not a fully supported property so be sure to have a fallback.

I’m sure once the property is supported more broadly, the developers will address the flag. This scenario has happened before with other CSS properties in BSS.

https://caniuse.com/?search=corner-shape

1 Like
5

I hope the developers at least add rendering support for this property in the built-in preview. I don’t mind if it stays flagged as unsupported for now. At the moment, I have to keep checking the browser preview just to see the changes.

6

You can add it to the Head Content in the settings, like this:

<style>
.card {
    border-radius: 24px;
    corner-shape: squircle;
}
</style>

It will work when you preview, export or publish your site, but not internally in the Bootstrap Studio App

1 Like