Limited supportLimited browser support. Check compatibility before use.
Other Limited support

corner-shape

The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.

Other

Overview

The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
corner-block-end-shape
Experimental
139
139
139
Other
css.properties.corner-block-start-shape
Experimental

The corner-block-start-shape CSS property specifies the shape of both the corners on a box's block-start edge, within their border-radius area.
139
139
139
css.properties.corner-bottom-left-shape
Experimental

The corner-bottom-left-shape CSS property specifies the shape of a box's bottom-left corner, within its border-radius area.
139
139
139
css.properties.corner-bottom-right-shape
Experimental

The corner-bottom-right-shape CSS property specifies the shape of a box's bottom-right corner, within its border-radius area.
139
139
139
css.properties.corner-bottom-shape
Experimental

The corner-bottom-shape CSS property specifies the shape of both the corners on a box's bottom edge, within their border-radius area.
139
139
139
css.properties.corner-end-end-shape
Experimental

The corner-end-end-shape CSS property specifies the shape of a box's block-end and inline-end corner, within its border-radius area.
139
139
139
css.properties.corner-end-start-shape
Experimental

The corner-end-start-shape CSS property specifies the shape of a box's block-end and inline-start corner, within its border-radius area.
139
139
139
css.properties.corner-inline-end-shape
Experimental

The corner-inline-end-shape CSS property specifies the shape of both the corners on a box's inline-end edge, within their border-radius area.
139
139
139
css.properties.corner-inline-start-shape
Experimental

The corner-inline-start-shape CSS property specifies the shape of both the corners on a box's inline-start edge, within their border-radius area.
139
139
139
css.properties.corner-left-shape
Experimental

The corner-left-shape CSS property specifies the shape of both the corners on a box's left-hand edge, within their border-radius area.
139
139
139
css.properties.corner-right-shape
Experimental

The corner-right-shape CSS property specifies the shape of both the corners on a box's right-hand edge, within their border-radius area.
139
139
139
css.properties.corner-shape
Experimental

The corner-shape shorthand CSS property specifies the shape of a box's corners, within the area specified by its border-radius property value.
139
139
139
css.properties.corner-start-end-shape
Experimental

The corner-start-end-shape CSS property specifies the shape of a box's block-start and inline-end corner, within its border-radius area.
139
139
139
css.properties.corner-start-start-shape
Experimental

The corner-start-start-shape CSS property specifies the shape of a box's block-start and inline-start corner, within its border-radius area.
139
139
139
css.properties.corner-top-left-shape
Experimental

The corner-top-left-shape CSS property specifies the shape of a box's top-left corner, within its border-radius area.
139
139
139
css.properties.corner-top-right-shape
Experimental

The corner-top-right-shape CSS property specifies the shape of a box's top-right corner, within its border-radius area.
139
139
139
css.properties.corner-top-shape
Experimental

The corner-top-shape CSS property specifies the shape of both the corners on a box's top edge, within their border-radius area.
139
139
139
css.types.corner-shape-value
Experimental

The CSS data type describes the shape of a container corner. It is used by the corner-shape shorthand property and its constituent properties to specify the shape to apply to affected container corners.
139
139
139
CSS type
bevel
Experimental
139
139
139
notch
Experimental
139
139
139
round
Experimental
139
139
139
scoop
Experimental
139
139
139
square
Experimental
139
139
139
squircle
Experimental
139
139
139
superellipse
Experimental

`superellipse()` function
139
139
139
Other
css.types.superellipse
Experimental

The superellipse() CSS function defines the curvature of an ellipse, and is used to specify corner shapes either directly, or via <corner-shape-value> keywords.
139
139
139
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.ios-style-card {
  border-radius: 20px;
  corner-shape: squircle;
}

Live demo

squircle

CSS Squircle demo.

PreviewFullscreen

Round(normal)

CSS Round(normal) demo.

PreviewFullscreen

cardcomparison

CSS cardcomparison demo.

PreviewFullscreen

Use cases

  • Using corner-shape

    The corner-shape CSS property sets the shape of an element's corners when using border-radius, allowing for shapes other than rounded corners. For example, corner-shape: squircle is a shape in between a square and rounded corner.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features