Creating a Border with Rounded Corners
Description
You can create a border with rounded corners using the border radius feature.
There are five properties associated with this feature.
- border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right- radius
Sets the radius for a single corner.
Value:A pair of length or percentage values. The percentages relate to the width and height of the border box. - border-radius
This shorthand property sets all corners at once.
Value:One or four pairs of length or percentage values, separated by a / character.
Example
The following code creates a Curved Border.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from ww w .j a v a 2s . c om-->
border: medium solid black;
border-top-left-radius: 20px 15px;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
Example 2
The border-radius shorthand property lets you specify one value for all four corners, or four individual values in a single value.
The following code uses the border-radius Shorthand Property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w.j a va2 s. c om-->
border: medium solid black;
}
#first {
border-radius: 20px/15px;
}
#second {
border-radius: 50% 20px 25% 5em/25% 15px 40px 55%
}
</style>
</head>
<body>
<p id="first">This is a test.</p>
<p id="second">This is a test.</p>
</body>
</html>