corner-top-left-shape
The corner-top-left-shape property specifies the shape of the top left corner.
Experimental — This feature is experimental and may change
Formal Syntax
<corner-shape-value>JavaScript Access
// Access via element.style
element.style.cornerTopLeftShape = 'round';
Logical Property Group
This property belongs to the corner-shape logical property group, which includes:
- corner-bottom-left-shape
- corner-bottom-right-shape
- corner-end-end-shape
- corner-end-start-shape
- corner-start-end-shape
- corner-start-start-shape
- corner-top-left-shape (current property)
- corner-top-right-shape
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| corner-top-left-shape | 139 | — | — | 139 |
| bevel | 139 | — | — | 139 |
| notch | 139 | — | — | 139 |
| round | 139 | — | — | 139 |
| scoop | 139 | — | — | 139 |
| square | 139 | — | — | 139 |
| squircle | 139 | — | — | 139 |
Related Properties
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- corner-block-end-shape 🧪
- corner-block-start-shape 🧪
- corner-bottom-left-shape 🧪
- corner-bottom-right-shape 🧪
- corner-bottom-shape 🧪
- corner-end-end-shape 🧪
- corner-end-start-shape 🧪
- corner-inline-end-shape 🧪
- corner-inline-start-shape 🧪
- corner-left-shape 🧪
- corner-right-shape 🧪
- corner-shape 🧪
- corner-start-end-shape 🧪
- corner-start-start-shape 🧪
- corner-top-right-shape 🧪
- corner-top-shape 🧪
- border-block-clip 🚧
- border-block-end-clip 🚧
- border-block-end-radius 🚧
- border-block-start-clip 🚧
- border-block-start-radius 🚧
- border-bottom-clip 🚧
- border-bottom-radius 🚧
- border-boundary 🚧
- border-clip 🚧
- border-inline-clip 🚧
- border-inline-end-clip 🚧
- border-inline-end-radius 🚧
- border-inline-start-clip 🚧
- border-inline-start-radius 🚧
- border-left-clip 🚧
- border-left-radius 🚧
- border-limit 🚧
- border-right-clip 🚧
- border-right-radius 🚧
- border-shape 🚧
- border-top-clip 🚧
- border-top-radius 🚧
- corner 🚧
- corner-block-end 🚧
- corner-block-start 🚧
- corner-bottom 🚧
- corner-bottom-left 🚧
- corner-bottom-right 🚧
- corner-end-end 🚧
- corner-end-start 🚧
- corner-inline-end 🚧
- corner-inline-start 🚧
- corner-left 🚧
- corner-right 🚧
- corner-start-end 🚧
- corner-start-start 🚧
- corner-top 🚧
- corner-top-left 🚧
- corner-top-right 🚧