Working With border-radius CSS3 Property

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

• 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.

are all versions of web browsers that support the border-radius property.


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 

properties respectively.
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.

 Thus, you can use the four values border-radius CSS3 property to create the rounded border like that of image above.
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 

---

SHARE THIS