The border-radius property
The border-radius property creates rounded
corners for border and background. The property
value is any
size units.
Default value: 0. It is a shorthand for
border-top-left-radius,
border-top-right-radius,
border-bottom-left-radius,
border-bottom-right-radius
properties.
Syntax
selector {
border-radius: value;
}
Number of values
The property can take 1, 2, 3
or 4 values, separated by a space:
| Number | Description |
|---|---|
1 |
For all corners at the same time. |
2 |
The first value sets the rounding for top-right and bottom-left corners, the second - for top-left and bottom-right. |
3 |
The first value sets the rounding for top-left corner, the second - for both top-right and bottom-left, and the third - for bottom-right corner. |
4 |
The first value specifies the rounding for top-left corner, the second value for top-right corner, the third value for bottom-right corner, and the fourth value for bottom-left corner. |
Elliptical rounding
Two values separated by a slash set an elliptical rounding. The value before the slash indicates a horizontal rounding, and the values after the slash indicate a vertical rounding:
selector {
border-style: horizontal / vertical;
}
If rounding is specified for several corners, then all horizontal roundings are listed before the slash, and all vertical ones after it.
Example
We set the rounding to 10px
for all corners:
<div id="elem"></div>
#elem {
border-radius: 10px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Example
Let's see what the rounding looks like for a border in the form of dots:
<div id="elem"></div>
#elem {
border-radius: 10px;
border: 1px dotted black;
width: 300px;
height: 100px;
}
:
Example
Set the rounding to 10px for the corners
of one diagonal, and the rounding to 40px
- for the corners of the second diagonal:
<div id="elem"></div>
#elem {
border-radius: 10px 40px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Example
Set the rounding to 10px for top-left corner,
the rounding to 30px for bottom-right corner,
and the rounding to 50px for the corners of
the second diagonal:
<div id="elem"></div>
#elem {
border-radius: 10px 50px 30px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Example
Set different roundings for each corner:
<div id="elem"></div>
#elem {
border-radius: 10px 30px 50px 70px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Example
Let's make an elliptical rounding by setting
20px for the horizontal value of the
rounding and 40px for the vertical one:
<div id="elem"></div>
#elem {
border: 1px solid black;
border-radius: 20px / 40px;
width: 300px;
height: 100px;
}
:
Example
Now let’s set a different elliptical rounding for all corners separately:
<div id="elem"></div>
#elem {
border: 1px solid black;
border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
width: 300px;
height: 100px;
}
:
Example
If you put a rounding for a square block equal to half a square side, you get a circle:
<div id="elem"></div>
#elem {
border-radius: 100px;
border: 1px solid black;
width: 200px;
height: 200px;
}
:
Example
If you put a rounding larger than a square side, you will still get a circle:
<div id="elem"></div>
#elem {
border-radius: 200px;
border: 1px solid black;
width: 200px;
height: 200px;
}
:
Example
You can also get a circle by setting border-radius
to 50% (the advantage is that you don't have to
change the rounding when resizing a square):
<div id="elem"></div>
#elem {
border: 1px solid black;
border-radius: 50%;
width: 200px;
height: 200px;
}
:
Example
Setting border-radius as a percentage for
a rectangle will result in an elliptical rounding. If
the width is set to 400px, the height to
200px, and border-radius to 10%,
then it’s the same, as if 40px/20px were written:
<div id="elem"></div>
#elem {
border-radius: 10%;
border: 1px solid black;
width: 400px;
height: 200px;
}
:
Example
Let's set the border-radius value to 50%
for a rectangle - we get an ellipse:
<div id="elem"></div>
#elem {
border-radius: 50%;
border: 1px solid black;
width: 400px;
height: 200px;
}
:
Example
The border-radius property rounds not only
the corners of a border, but also a background:
<div id="elem"></div>
#elem {
border-radius: 20px;
width: 300px;
height: 100px;
background-color: #e4f1ed;
}
:
See also
-
the
borderproperty
that is a shorthand property for a border
