CSS borders and box decorations

TheCSS 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 theCSS backgrounds and borders module, addingcorner-shape andborder-shape properties, logicalborder-radius properties, longhand properties for thebox-shadow property, and properties to create partial borders.

Borders and box decorations in action

Select asuperellipse() 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>    <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"       list="tens" />  <datalist>    <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" />  <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 pageSetUp {  html {    font-family: Arial, Helvetica, 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

The CSS borders and box decorations module level 4 also introduces theborder-shape,border-limit, andborder-clip properties, along with theborder-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 supportedborder-radius andbox-shadow properties, includingborder-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, andbox-shadow-spread. These component properties are also as yet unsupported.