Creating a Border with Rounded Corners
The border-radius creates a border with rounded corners.
Property | Description | Values |
---|---|---|
border-top-left-radius | Sets the radius for a top left corner. | A pair of length or percentage values related to the width and height of the border box. |
border-top-right-radius | Sets the radius for a top right corner. | A pair of length or percentage values related to the width and height of the border box. |
border-bottom-left-radius | Sets the radius for a bottom left corner. | A pair of length or percentage values related to the width and height of the border box. |
border-bottom-rightradius | Sets the radius for a bottom right corner. | A pair of length or percentage values related to the width and height of the border box. |
border-radius | This shorthand property sets all corners at once. | One or four pairs of length or percentage separated by a / character. |
You define a curved corner by specifying two values for radius. The values are either as a length or as a percentage. The first value specifies the horizontal radius. The second specifies the vertical radius. Percentage values are of the horizontal and vertical size of the element's box.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
border: medium solid black;
border-top-left-radius: 20px 15px;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
If you supply only one value, then radius of both the horizontal and vertical use this value.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
border: medium solid black;
border-top-left-radius: 20px;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
To create space between an element's content and its border, add padding to the element.
The border-radius shorthand property specifies one value for all four corners, or four individual values.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
border: medium solid black;
}
#first {
border-radius: 20px / 15px;
}
</style>
</head>
<body>
<p id="first">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>
The following css uses four individual values.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
border: medium solid black;
}
#first {
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%
}
</style>
</head>
<body>
<p id="first">
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>