CSS border-top-left-radius Property

A border-top-left-radius sets the top left corner radius.

This property gives an element a rounded border effect.

Example

#

An element with a border-top-left-radius.

50px radius on top left corner
<style>
  .border-rounded {
    padding: 30px;
    border: 3px solid #302ea3;
    border-top-left-radius: 50px;
  }
</style>

<div class="border-rounded">50px radius on top left corner</div>

Using border-top-left-radius

The border-top-left-radius property sets the top left corner radius.

The border-radius gives an element a rounded border effect.

Syntax

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

Values

#

Value Description
length Shape of the top left corner, the default value is 0.
% Shape of the top left corner in percentage
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-top-radius values.

50% radius on top left corner
<style>
  .border-rounded-percentage {
    padding: 50px;
    border: 3px solid #302ea3;
    border-top-left-radius: 50%;
  }
</style>

<div class="border-rounded-percentage">
  50% radius on top left corner
</div>

Browser support

This table shows when border-top-left-radius support started for each browser.

Chrome
5.0 May 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
5.0 Jun 2010

You may also like

Guides