Easy Tutorial
❮ Prop Canvas Imagedata Height Prop Area Hostname ❯

borderRadius Property

Style Object

Example

Add rounded corners to a div element:


Definition and Usage

The borderRadius property is a shorthand property for setting or returning the four border-radius properties.

Tip: This property allows you to add rounded corners to elements!


Browser Support

IE9+, Firefox, Chrome, Safari, and Opera support the borderRadius property.


Syntax

Return the borderRadius property:

Set the borderRadius property:

Note: The four values for the radius are given in the order of top-left, top-right, bottom-right, bottom-left. If the bottom-left value is omitted, it matches the top-right value. If the bottom-right value is omitted, it matches the top-left value. If the top-right value is omitted, it matches the top-left value.

Property Values

Value Description
length Defines the shape of the corner. The default value is 0.
% Defines the shape of the corner in percentage.
initial Sets this property to its default value. See initial
inherit Inherits this property from its parent element. See inherit

Technical Details

Default value: 0
Return value: String, representing the border-radius property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: border-radius Property


Style Object

❮ Prop Canvas Imagedata Height Prop Area Hostname ❯