The CSS borders and box decorations module provides properties for adding borders, shaped corners, and box shadows to elements. This module extends borders and box decorations introduced in the CSS backgrounds and borders module, adding corner-shape and border-shape properties, logical border-radius properties, longhand properties for the box-shadow property, and properties to create partial borders.
Borders and box decorations in action
Select a superellipse() value from the drop down menu to change the border shape. Use the slider to change the border radius size. Toggle the checkbox to hide and show the box shadow.
<p>
<label for="corner-shape-choice"
>Choose a <code>superellipse()</code> value:</label
>
<select id="corner-shape-choice">
<option>superellipse(infinity)</option>
<option>superellipse(5)</option>
<option>superellipse(3)</option>
<option>superellipse(2)</option>
<option>superellipse(1.5)</option>
<option>superellipse(1)</option>
<option>superellipse(0.5)</option>
<option>superellipse(0)</option>
<option>superellipse(-0.5)</option>
<option selected>superellipse(-1)</option>
<option>superellipse(-1.5)</option>
<option>superellipse(-2)</option>
<option>superellipse(-3)</option>
<option>superellipse(-5)</option>
<option>superellipse(-infinity)</option>
</select>
</p>
<p>
<label for="radius">Choose a <code>border-radius</code> value:</label>
<input
type="range"
step="5"
min="0"
max="100"
value="30"
id="radius"
list="tens" />
<datalist id="tens">
<option value="0" label="0"></option>
<option value="20" label="20px"></option>
<option value="40" label="40px"></option>
<option value="60" label="60px"></option>
<option value="80" label="80px"></option>
<option value="100" label="100px"></option>
</datalist>
</p>
<p>
<input type="checkbox" id="check" />
<label for="check">Toggle the box-shadow</label>
</p>
<div></div>div {
width: 100%;
height: 200px;
background-color: plum;
background-image:
repeating-linear-gradient(transparent 0 19px, #00000022 19px 20px),
repeating-linear-gradient(to left, transparent 0 19px, #00000022 19px 20px);
}
div {
box-shadow: 3px 3px 5px rgb(0 0 0 / 0.5);
border-radius: 30px;
}
body:has(input:checked) div {
box-shadow: none;
}
@layer page-setup {
html {
font-family: "Helvetica", "Arial", sans-serif;
}
body {
max-width: 600px;
min-width: fit-content;
margin: 20px auto;
}
div {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
select {
padding: 3px 5px;
}
code {
font-weight: bolder;
}
}const rectangle = document.querySelector("div");
const select = document.querySelector("select");
const range = document.getElementById("radius");
function setCornerShape() {
rectangle.style.cornerShape = select.value;
rectangle.style.borderRadius = `${range.value}px`;
rectangle.innerHTML = `<pre>div {
corner-shape: ${select.value};
border-radius: ${range.value}px;
}</pre>`;
}
select.addEventListener("change", setCornerShape);
range.addEventListener("input", setCornerShape);
setCornerShape();Reference
Properties
border-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-colorborder-end-end-radiusborder-end-start-radiusborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-start-end-radiusborder-start-start-radiusborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthbox-shadowcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shape
The CSS borders and box decorations module level 4 also introduces the border-shape, border-limit, and border-clip properties, along with the border-clip-bottom, border-clip-left, border-clip-right, border-clip-top longhand properties. Currently, no browsers support these features. The module also introduces component properties for the well supported border-radius and box-shadow properties, including border-block-end-radius, border-block-start-radius, border-bottom-radius, border-inline-end-radius, border-inline-start-radius, border-right-radius, border-top-radius, box-shadow-blur, box-shadow-color, box-shadow-offset, box-shadow-position, and box-shadow-spread. These component properties are also as yet unsupported.
Data types
corner-shape-value
Functions
superellipse()
Guides
- Learn CSS: the box model
- Learn how borders and other box model properties impact the CSS box model.
Related concepts
box-sizingpropertybox-decoration-breakpropertytext-shadowproperty<url>data type<color>data typeimagedata type<position>data typecurrentColorkeyword
CSS backgrounds and borders module
background-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackgroundshorthandbackground-position-xbackground-position-yborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-imageshorthand
Specifications
See also
filterbackdrop-filterdrop-shadow()filter function- Applying color to HTML elements using CSS
- Tools: