CSS3 rounded corner border-radius

 CSS3 rounded corner border-radius is used to set the rounded corner effect of the block. You can set the value of four rounded corners at one time, or you can set different values ​​for each rounded corner.

Basic grammar

border-radius: rounded corner value;

In this basic syntax example, the rounded corner value can be set by yourself. Let’s look at a simple example now

<div style="border:2px #ccc solid; border-radius:10px; width:360px;height:60px;background-color:#eee;">CSS3 border-radius rounded corner example</div>

Present results

CSS3 border-radius rounded corner example

In this example, we set a rounded corner value (red part) such as border-radius: 10px, and the four corners are rendered with the same effect. In addition, we also use other syntax, such as DIV width (width), height (Height), background-color (background color) and border (border), etc. The purpose is only to make the example show a clear effect. Most applications should be enough to see here, but if you need further, respectively It is also possible to set different values ​​for the four corners.

Grammar of the four corners

• border-top-left-radius-set the upper left corner
  
• border-top-right-radius-set the upper right corner
  
• border-bottom-right-radius-set the bottom right corner
  
• border-bottom-left-radius-set the lower left corner
  

When setting the rounded corners in CSS3, there are% or length units that can be used. Please try it yourself.