Border-radius a CSS3 property which is used to create rounded borders for block HTML element such as the HTML <div> tag, and thus, it is newer version of web browsers that support the border-radius CSS3 property. For example
The border-radius property support four numeric values, which forms the shorthand property for:
This means that border-radius: 20px 55px 35px 10px; is the shorthand for
border-top-left-radius: 20px;
border-top-right-radius: 55px
border-bottom-right-radius: 35px;
border-bottom-left-radius: 10px;
The border-radius do not only support four values. It also support 3, 2, and 1 values. When you are using a 4, or 3, or 2, or 1 value with the border-radius CSS3 property, this it what it means:
What you see above is not an image, it is the implementation of both the border-radius and the border-color CSS property. Here is the code:
<div style="width: 600px; height: 300px;
border: solid;
border-width: 20px;
border-radius: 15px 50px;
border-color:red green blue pink; ">
</div>
Also Read:
- Google Chrome Version 5 and above.
- Mozilla Firefox version 4.0 and above.
- Opera version 10.5 and above.
- Microsoft Edge version 9.0 and above.
- Safari version 5.0 and above.
The border-radius property support four numeric values, which forms the shorthand property for:
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-right-radius:
- border-bottom-left-radius
This means that border-radius: 20px 55px 35px 10px; is the shorthand for
border-top-left-radius: 20px;
border-top-right-radius: 55px
border-bottom-right-radius: 35px;
border-bottom-left-radius: 10px;
The border-radius do not only support four values. It also support 3, 2, and 1 values. When you are using a 4, or 3, or 2, or 1 value with the border-radius CSS3 property, this it what it means:
- Four values: means that the, first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner.
- Three values: means that the, first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right.
- Two values: means that the, first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner.
- One value: means that all four corners of the element are rounded equally.
What you see above is not an image, it is the implementation of both the border-radius and the border-color CSS property. Here is the code:
<div style="width: 600px; height: 300px;
border: solid;
border-width: 20px;
border-radius: 15px 50px;
border-color:red green blue pink; ">
</div>
Also Read:
- Dotted/Dashed Border-Radiused Corners Are No Longer Rendered As Solid In Firefox
- Creating Scrollable Box In A Webpage Using CSS
- How To Style Visited Links With CSS
- How To Style The Border(s) Of A Single Cell Of A Table In Microsoft Word2016
Team Pinfoltd
0 comments: