/

HTML / CSS / JavaScript Tutorial

CSS Property: border-bottom-left-radius

[this page | pdf | back links]

The CSS (CSS3) border-bottom-left-radius property determines the shape of the bottom-left corner of a border. It allows you to add rounded borders to elements.

 

The two length or percentage values define the radii of a quarter ellipse defining the shape of the corner. The first is the horizontal radius, the second the vertical radius. If either is omitted then it is copied from the other (so the corner is a quarter-circle). If either is zero then the corner becomes square. Percentages for the horizontal radius refer to the width of the border box, those for the vertical radius refer to the height of the border box.

 

Valid property values (other than inherit and initial) are:

 

Value

Description

length1, length2

Specified CSS lengths

%, %

See above

 

Default Value:

0

JavaScript syntax:

e.g. object.style.borderBottomLeftRadius="5px 8px"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
p {border: thin solid black; width: 200px}
p.x1 {border-bottom-left-radius: 10px 5px;}
</style>
</head>
<body>
<p>1. Element with default property</p>
<p class="x1">2. Element set using in-file HTML style</p>
<p id="x2">3. Element set using JavaScript</p>

<script>
document.getElementById("x2").style.borderBottomLeftRadius = "10px 5px";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyBorderBottomLeftRadius() {
  var x = document.createElement("DIV"); x.style.borderBottomLeftRadius = "10px 5px"; return (window.getComputedStyle(x, null).borderBottomLeftRadius == "10px 5px");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile