Examples of CSS3 rounded corner Effects

Recently, I saw a website using a nice rounded corner. I also studied it today. Below are some examples of rounded corners implemented using css3.

The border-radius attribute is used to implement the rounded corner effect using css3. This attribute is added in css 3.0. Here, the compatibility of border-radius is listed as follows;

Browser	Support
Firefox (2, 3 +)	√
Google Chrome (1.0.154 + ...)	√
Google Chrome (2.0.156 + ...)	√
Safari (3.2.1 + windows)	√
Internet Explorer (IE7, IE8)	×
Opera 9.6	×

The value of the border-radius attribute is the value of the circle radius.

Because of the browser engine, firefox Safari and Chrome have their own special methods, namely-moz-border-radius and-webkit-border-radius.

-Moz-border-radius for Firefox

-Webkit-border-radius for Safari and Chrome

Note that the three forms of writing must follow a certain order, in the following order:

#radius {    -moz-border-radius: 15px;      /* Gecko browsers */    -webkit-border-radius: 15px;   /* Webkit browsers */    border-radius:15px;            /* W3C syntax */}

Border-radius can also be written separately like the border attribute, namely:

Border-top-right-radius
Border-bottom-right-radius
Border-bottom-left-radius
Border-top-left-radius

Add the corresponding prefix (-moz--webkit-) to firefox Safari and Chrome.

The following shows a simple corner effect achieved through css3. First, paste it below:

The following is the sample code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Some cool people use this to implement an Olympic five-ring logo. If you like it, you can see it (note that you can see the effect in a browser that supports the border-radius attribute ):
Css3 rounded corners implement the Olympic rings (as shown below)
Articles you may be interested in

 

 
  
Css3 shadow effect example
 
  
Three solutions for ineffective page refresh caused by Js, css, and images cached on webpages
 
  
The lower-right corner of the page displays the advertisement js, floating effect (compatible with multiple browsers)
 
  
Flash slide switching effect code, ultra-simple and ultra-practical
 
  
Jquery drop-down menu (ultra-simple and practical, compatible with mainstream browsers such as IE and firefox)
 
  
CSS transparency, compatible with IE and firefox
 
  
Convert Baidu search result link to actual link
 
  
Display text box effects of line numbers, compatible with browsers such as ie and Firefox