Articles → CSS → Border-Radius Property In CSS3
Border-Radius Property In CSS3
Purpose
Syntax
<element style=" border-radius:value_in_pixel;" />
Specify A Corner Of The Element
- Top left corner
- Top right corner
- Bottom right corner
- Bottom left corner
Click to Enlarge
Rules Of Specifying Corner
- Four values
- first value applies to the top left corner
- second value applies to the top right corner
- third value applies to the bottom right corner
- fourth value applies to the bottom left corner.
- Three values
- first value applies to the top left corner
- second value applies to the top right and bottom left corner
- third value applies to the bottom right corner.
- Two values
- first value applies to the top left and bottom right corner
- second value applies to the top right and bottom left corner.
- One value – Applies to all 4 corners.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<div style="border: 2px solid red; width:100px;height:100px; border-radius:30px;" />
<!--one value-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="border: 2px solid red; width:100px;height:100px; border-radius:30px 20px;" />
<!--two values-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="border: 2px solid red; width:100px;height:100px; border-radius:30px 20px 40px;" />
<!--three values-->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="border: 2px solid red; width:100px;height:100px; border-radius:30px 20px 40px 50px;" />
<!--four values-->
</form>
</body>
</html>
Output
Click to Enlarge