Example
Add rounded borders to a div element:
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
</body>
</html>
Definition and Usage
The border-radius property is a shorthand property for setting the four border-*-radius properties.Tip: This property allows you to add rounded borders to elements!
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.borderRadius="5px" |
Syntax
border-radius: 1-4 length|% / 1-4 length|%;
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners | |
| % | Defines the shape of the corners in % |
+CSS3 +CSSReflex +CSSCHOPPER +CSS Author +CSSW Yemen-Sana'a +Css Color +CSSW Yemen-Sana'a +CSS Light +CSS Mobi
No comments: