CSS border-bottom-left-radius Property

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

This property gives an element a rounded border effect.

Example

#

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

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

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

Syntax

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

Values

#

Value Description
length Shape of the bottom left corner, the default value is 0.
% Shape of the bottom 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-bottom-radius values.

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

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

Browser support

This table shows when border-bottom-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