CSS border-top-left-radius Property

CSS border-top-left-radius property specifies a radius for element’s top-left corner.

See the paragraph below, it has a 10px radius for its top-left corner.

This paragraph has a rounded top-left corner.

The radius value can be specified in ‘px’, ’em’, ‘rem’, ‘cm’, ‘%’, etc. But we mostly specify it in ‘px’. Try out the example below to see how it works:

Example:

h1{
  border: 3px solid tomato;
  border-top-left-radius: 10px;
}

CSS Syntax:

The border-top-left-radius property has the below syntax:

border-top-left-radius: radius | initial | inherit;

Property Values

The border-top-left-radius property accepts the following values:

radiusIt defines the shape of the top-left corner of an element. The default value is 0. It specifies the radius of the top-left corner in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the border-top-left-radius to its default value. Which is 0(zero).
inheritInherits the border-top-left-radius property from the parent element.

General Info

Default Value0(zero)
InheritedNo
JavaScript Usageelement.style.borderTopLeftRadius = “10px”

Related Pages

CSS Tutorial: CSS Borders