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