How to use Border-radius in CSS3? Examples of Border-radius draw a circle with a

Source: Internet
Author: User
CSS3 in Border-radius used to achieve the effect of rounded corners, the following details its usage, and finally with an example to explain how to draw a circle with Border-radius.

The Border-radius property is a shorthand property for setting four Border-*-radius properties.
Note: If you omit the lower-left corner, the upper-right corner is the same. If you omit the lower-right corner, the upper-left corner is the same. If you omit the upper-right corner, the upper-left corner is the same. Its value can be a length value, or it can be hundred percent.
When four values are given, the upper-left corner, the upper-right corner, the lower-right corner, the lower-left corner, respectively. namely Border-top-left-radius, Border-top-right-radius, Border-bottom-right-radius, Border-bottom-left-radius
When given three values, represent the upper left corner, (upper right corner, lower left corner), lower right corner
When two values are given, respectively (upper-left corner, lower-right corner), (upper-right corner, lower-left corner)
An effect that represents four corners when given a value

Example 1: Give a value

div{width:150px;height:150px;border-radius:15%;background:red;}

Example 2: Give two values

div{width:150px;height:150px;border-radius:5% 15%;background:red;}

Example 3: Give three values

div{width:150px;height:150px;border-radius:5% 15% 30%;background:red;}

Example 4: Give four values

div{width:150px;height:150px;border-radius:5% 15% 30% 45%;background:red;}


Example: Make a circle with Border-radius

<! DOCTYPE html><html> <head>  <meta charset= "UTF-8" >  <title></title>  <style type= "Text/css" >   . A1{width:200px;height:200px;background:beige;text-align:center;line-height: 200px;font-size:50px;}   . a2{width:200px;height:200px;background:pink;border-radius:50%;}  </style> </head> <body>  <div class= "A1" >   <div class= "A2" >HELLO</div>  </div> </body></html>

The above is a detailed introduction to the fillet, beginners can try to practice more!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: