CSS Property border-radius








The border-radius property is a shorthand property for setting the border radius properties in four corners. We can use border-radius to create round corners.

Summary

ItemValue
Initial value 0
Inherited no.
Version CSS3
JavaScript syntax object.style.borderRadius="5px"




CSS Syntax

border-radius:length|% length|% length|% length|% / 
              length|% length|% length|% length|%

We can provide one to four values.

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 2em 1em 3em / 0.4em 3em;

is equivalent to:

border-top-left-radius: 2em 0.4em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 3em 0.4em;
border-bottom-left-radius: 1em 3em;




Property Values

The property values are listed in the following table.

ValueDescription
length set the length for radius
% set percentage size for radius

Browser compatibility

border-radius Yes 9.0 Yes Yes Yes

Example

An example showing how to use border-radius CSS property.

<!DOCTYPE html>
<html>
<head>
<style> 
div<!--   ww  w  .j  a  v a  2  s  . c o  m-->
{
    border:2px solid red;
    padding:10px 40px; 
    background:#eee;
    width:300px;
    border-radius:25px;
}
</style>
</head>
<body>

    <div>Rounded corners.</div>

</body>
</html>

Click to view the demo