Tuesday, August 22, 2017

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:
Team Pinfoltd 




SHARE THIS

0 comments:

From The Web

loading...