W3cubDocs

/CSS

<corner-shape-value>

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The <corner-shape-value> 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.

Syntax

The <corner-shape-value> data type can take a superellipse() function that defines a custom shape, or one of six keyword values that describe common superellipse() values.

Values

superellipse()

Defines a custom corner superellipse shape. A negative parameter creates an inward, or concave, curve while a positive parameter creates an outward, or convex, curve.

Keywords

The available keyword values are as follows:

bevel: Defines a straight, diagonal corner, which is neither convex nor concave. The bevel keyword is equivalent to superellipse(0).
notch: Defines a 90-degree concave square corner. The notch keyword is equivalent to superellipse(-infinity).
round: Defines a convex ordinary ellipse, which is the standard rounded corner created by border-radius without a corner-shape applied. The round keyword is equivalent to superellipse(1). This is the default (initial) value for all corner-shape properties.
scoop: Defines a concave ordinary ellipse. The scoop keyword is equivalent to superellipse(-1).
square: Defines a 90-degree convex square corner, which is the default corner shape when no border-radius (or border-radius: 0) is applied. The square keyword is equivalent to superellipse(infinity).
squircle: Defines a "squircle", which is a convex curve in between round and square. The squircle keyword is equivalent to superellipse(2).

Note: You can smoothly animate between different superellipse() values, and between different corner shape keywords, as the animation interpolates between their superellipse() equivalents.

Formal syntax

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

<superellipse()> = 
  superellipse( <number [-∞,∞]>  |
  infinity                       |
  -infinity )

Examples

`<corner-shape-value>` value comparison

In this example, we provide a drop-down menu allowing you to select different <corner-shape-value> values and a slider that updates the container's border-radius. This enables visualizing the effect of the different keywords and superellipse() parameter values.

The corner-shape property defines the shape of the box's corners while the region the shape is applied to is specified by the border-radius property. The code is hidden for brevity, but you can find a full explanation of corner-shape values along with other related examples on the corner-shape reference page.

Note: See also the superellipse() function value comparison example.

Specifications

Specification
CSS Borders and Box Decorations Module Level 4> # typedef-corner-shape-value>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`corner-shape-value`	139	139	No	123	No	139	No	91	No	No	139	No
`bevel`	139	139	No	123	No	139	No	91	No	No	139	No
`notch`	139	139	No	123	No	139	No	91	No	No	139	No
`round`	139	139	No	123	No	139	No	91	No	No	139	No
`scoop`	139	139	No	123	No	139	No	91	No	No	139	No
`square`	139	139	No	123	No	139	No	91	No	No	139	No
`squircle`	139	139	No	123	No	139	No	91	No	No	139	No
`superellipse`	139	139	No	123	No	139	No	91	No	No	139	No