Border-related features in CSS3

1. border-radius

The rounded corner of CSS2 can only be implemented through special methods or images. It can be used directly in CSS3. Command:

Width indicates the horizontal radius of the four rounded corners. Currently, this is only a draft, not a standard. Therefore, it cannot be identified by using the border-radius browser, firefox is-moz-border-radius, and webkit kernel is-webkit-border-radius. IE8 and Opera do not yet support this attribute.
Sometimes it is useful to specify an angle as a rounded corner, so there are the following four types (well, moz and webkit have different names this time ):

 

Example: four rounded corners. If you see a rounded corner, your browser supports this feature.
Border: 5px solid gray;
Border-radius: 10px;
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
Padding: 10px;

 

Example: Two rounded corners at the bottom. If you see this, your browser supports this feature.
Border: 5px solid gray;
-Moz-border-radius-bottomleft: 25px;
-Moz-border-radius-bottomright: 40px;
-Webkit-border-bottom-left-radius: 25px;
-Webkit-border-bottom-right-radius: 40px;
Padding: 10px;

Currently, it seems that only Firefox3.5 and later versions can achieve this feature.
Border: 10px solid #000;
-Moz-border-left-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-Moz-border-top-colors: # fff # eee #999 #888 #777 #666 #333 #222;
Padding: 10px; 3. shadow: box-shadow

Syntax:

The values are: Shadow horizontal offset, shadow vertical offset, shadow blur value, and shadow color.

Example: shadow effect:
-Webkit-box-shadow: 5px 2px 6px #000;
-Moz-box-shadow: 5px 2px 6px #000;
Padding: 10px; 4. border-image

This is similar to background, but this is used for border. Syntax:

Because there are no images on the website, I am too lazy to get it. You should know how to use background.