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.

Reference

Properties

• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-color
• border-end-end-radius
• border-end-start-radius
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-start-end-radius
• border-start-start-radius
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• box-shadow
• corner-block-end-shape
• corner-block-start-shape
• corner-bottom-left-shape
• corner-bottom-right-shape
• corner-bottom-shape
• corner-end-end-shape
• corner-end-start-shape
• corner-inline-end-shape
• corner-inline-start-shape
• corner-left-shape
• corner-right-shape
• corner-shape
• corner-start-end-shape
• corner-start-start-shape
• corner-top-left-shape
• corner-top-right-shape
• corner-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-sizing property
• box-decoration-break property
• text-shadow property
• <url> CSS type
• <color> data type
• <image> data type
• <position> data type
• currentColor keyword

CSS backgrounds and borders module

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background shorthand
• background-position-x
• background-position-y
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-image shorthand

Specifications

See also

• filter
• backdrop-filter
• drop-shadow() filter function
• Applying color to HTML elements using CSS
• Border-image generator
• Border-radius generator