CSS3 tutorial (2): Web page border radius and web page rounded corners_css3_CSS_Web page

Introduction to the Webjx article on web page production: The implementation of rounded corners in the page is a very troublesome problem. Although there are many implementation methods, they are all quite troublesome. In this article, let’s see how to use CSS3 border-radius to achieve rounded corners for a DIV. The implementation of rounded corners on the page is a very troublesome problem. Although there are many implementation methods now, they are all quite troublesome. In this article, let’s see how to use CSS3 border-radius to achieve rounded corners for a DIV.

The implementation of rounded corners on the page is a very troublesome problem. Although there are many implementation methods, they are all quite troublesome. In this article, let’s see how to use CSS3 border-radius to achieve rounded corners for a DIV. Cross-browser compatibility

As mentioned in the previous article "CSS3 Tutorial: What is CSS3", not all browsers support CSS3, but those better browsers choose to be compatible instead of directly supporting it. We have two prefixes that can be used.
Prefix:
-moz (e.g. -moz-border-radius) for Firefox
-webkit (e.g. -webkit-border-radius) for Safari and Chrome. CSS3 Rounded Corners (All)
The ability to achieve rounded corners without using images used to be very popular, creating those perfect little rounded corner images to use as proper CSS backgrounds was a very time-consuming job. Now, using CSS3, we can create rounded corners with just a few lines of code.

This is a setting with a normal border of 5px and a border radius of 15px: #roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius : 15px; padding: 15px 25px; height: inherit; width: 590px; }

Browser support:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1 windows) CSS3 rounded corners (individual)

Of course, the four corners of a DIV do not need to be all rounded, you can implement them individually Rounded corners.

#roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius- bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left- radius: 0px; -webkit-border-bottom-right-radius: 15px; padding: 15x 25px; height: inherit; width: 590px; } Browser support:

Firefox(3.05…)

Google Chrome(1.0. 154…)

Google Chrome (2.0.156…)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1 windows)

The above is the CSS3 tutorial (2): web page border radius and web page The content of the rounded corners_css3_CSS_ web page, please pay attention to the PHP Chinese website (www.php.cn) for more related content!