Css3 rounded corner, css3 rounded corner

Css3 rounded corner, css3 rounded corner

Css3 rounded corners: I'm sure you are familiar with image and background rounded corners,

Rounded corner Syntax: border-radius: rounded corner value;

This value can be em, ex, pt, px, percentage;

Border-radius is similar to margin and padding.

Border-radius: lefttop, righttop, rightbottom, and leftbottom.

<Div class = "box1"> </div>

. Box1 {width: 200px; height: 100px; border-radius: 30px 5px; background: # f66f17; margin-top: 30px ;}

<Div class = "box2"> </div>

. Box2 {width: 200px; height: 100px; border-radius: 30px 20px 10px 0px; background: # f66f17; margin-top: 30px ;}

It should be easy to understand the rounded corner.

For percentage: currently, the safest way is to set the style and width of each rounded border to the same value and avoid using the percentage value.

IE9 or lower does not support this attribute

If you have any questions, please point out.

Css3 rounded corner: Right corner on the right side of the rounded corner

Add a style border-radius: 10px to the nav;
Nav {display: block; background-color: #333; width: 840px; margin: 0 50px 0 0; padding: 0 10px 20px 5px; border-radius: 10px ;}

With CSS3, how does one implement a rounded border?

# Gaga {border: 3px solid # f00; border-radius: 5px 6px 7px 8px ;}
5 PX indicates the radians in the upper left corner;
6px indicates the radians in the upper right corner;
7px indicates the radians in the lower right corner;
8 PX indicates the radians in the lower left corner;
Hope to help you