<corner-shape-value>
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
The<corner-shape-value>CSSdata type describes the shape of a container corner. It is used by thecorner-shape shorthand property and itsconstituent properties to specify the shape to apply to affected container corners.
Syntax
The<corner-shape-value> data type can take asuperellipse() function that defines a custom shape, or one of six keyword values that describe commonsuperellipse() 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:
bevelDefines a straight, diagonal corner, which is neither convex nor concave. The
bevelkeyword is equivalent tosuperellipse(0).notchDefines a 90-degree concave square corner. The
notchkeyword is equivalent tosuperellipse(-infinity).roundDefines a convex ordinary ellipse, which is the standard rounded corner created by
border-radiuswithout acorner-shapeapplied. Theroundkeyword is equivalent tosuperellipse(1). This is the default (initial) value for allcorner-shapeproperties.scoopDefines a concave ordinary ellipse. The
scoopkeyword is equivalent tosuperellipse(-1).squareDefines a 90-degree convex square corner, which is the default corner shape when no
border-radius(orborder-radius: 0) is applied. Thesquarekeyword is equivalent tosuperellipse(infinity).squircleDefines a "squircle", which is a convex curve in between
roundandsquare. Thesquirclekeyword is equivalent tosuperellipse(2).
Note:You can smoothly animate between differentsuperellipse() values, and between different corner shape keywords, as the animation interpolates between theirsuperellipse() 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'sborder-radius. This enables visualizing the effect of the different keywords andsuperellipse() parameter values.
Thecorner-shape property defines the shape of the box's corners while the region the shape is applied to is specified by theborder-radius property. The code is hidden for brevity, but you can find afull explanation ofcorner-shape values along with other related examples on thecorner-shape reference page.
<form> <div> <label for="corner-shape-choice">Choose a corner-shape value:</label> <select> <optgroup label="Keywords"> <option value="square">square | superellipse(infinity)</option> <option selected value="squircle">squircle | superellipse(2)</option> <option value="round">round | superellipse(1)</option> <option value="bevel">bevel | superellipse(0)</option> <option value="scoop">scoop | superellipse(-1)</option> <option value="notch">notch | superellipse(-infinity)</option> </optgroup> <optgroup label="Functions"> <option>superellipse(3)</option> <option>superellipse(1.5)</option> <option>superellipse(0.5)</option> <option>superellipse(-0.5)</option> <option>superellipse(-1.5)</option> <option>superellipse(-3)</option> </optgroup> </select> </div> <div> <label for="radius-slider">Choose a border-radius value:</label> <input type="range" min="0" value="45" max="90" step="1" /> </div></form><section></section>html { font-family: "Helvetica", "Arial", sans-serif;}body { width: fit-content; margin: 20px auto;}section { display: flex; justify-content: center; align-items: center; margin-top: 20px;}select { padding: 3px 5px;}form div:nth-of-type(2) { margin-top: 5px; display: flex;}section { width: 100%; height: 180px; background-color: orange; background-image: linear-gradient( to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.5) );}section { box-shadow: 1px 1px 3px gray;}const rectangle = document.querySelector("section");const select = document.querySelector("select");const range = document.getElementById("radius-slider");function setCorners() { rectangle.style.cornerShape = select.value; const brValue = `${range.value}px`; rectangle.style.borderRadius = brValue; rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;}select.addEventListener("change", setCorners);range.addEventListener("input", setCorners);setCorners();Note:See also thesuperellipse() function value comparison example.
Specifications
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # typedef-corner-shape-value |