border-radius

The border-radius property sets the radius of all border corners.

Formal Syntax

border-radius = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Initial value: see individual properties
Applies to: see individual properties
Inherited: no
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties

See specification

JavaScript Access

// Access via element.style element.style.borderRadius = "value";

Browser Support

standard | MDN · Spec

Feature	Chrome	Firefox	Safari	Edge
border-radius	4	4	5	12
4_values_for_4_corners	4	4	5	12
elliptical_borders	1	4	3	12
percentages	8	4	5.1	12

Related Properties

border
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-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
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-right
border-right-color
border-right-style
border-right-width
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
outline
outline-color
outline-offset
outline-style
outline-width
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 🧪
border-block-clip 🚧
border-block-end-clip 🚧
border-block-end-radius 🚧
border-block-start-clip 🚧
border-block-start-radius 🚧
border-bottom-clip 🚧
border-bottom-radius 🚧
border-boundary 🚧
border-clip 🚧
border-inline-clip 🚧
border-inline-end-clip 🚧
border-inline-end-radius 🚧
border-inline-start-clip 🚧
border-inline-start-radius 🚧
border-left-clip 🚧
border-left-radius 🚧
border-limit 🚧
border-right-clip 🚧
border-right-radius 🚧
border-shape 🚧
border-top-clip 🚧
border-top-radius 🚧
corner 🚧
corner-block-end 🚧
corner-block-start 🚧
corner-bottom 🚧
corner-bottom-left 🚧
corner-bottom-right 🚧
corner-end-end 🚧
corner-end-start 🚧
corner-inline-end 🚧
corner-inline-start 🚧
corner-left 🚧
corner-right 🚧
corner-start-end 🚧
corner-start-start 🚧
corner-top 🚧
corner-top-left 🚧
corner-top-right 🚧