The power of border-radius hiding in CSS3

This article describes how to use the border-radius of CSS3 to draw circles, halfcircles, and 1/4 circles. How to Use the border-radius attribute

The following describes how to use the border-radius attribute.

Copy to ClipboardReference: [www.bkjia.com]. round {
Border-radius: 5px;/* all corners use rounded corners with a radius of 5px. This attribute is a standard attribute of CSS3 */
-Moz-border-radius: 5px;/* Private Attribute of Mozilla Browser */
-Webkit-border-radius: 5px;/* Private attributes of the Webkit browser */

Border-radius: 5px 4px 3px 2px;/* The Four radius values are the upper left corner, the upper right corner, the lower right corner, and the lower left corner */
}

For more information about how to Achieve Rounded Corners in IE, see Excellent Article Which Included Ways to Achieve Rounded Corners in IE.

1. Draw a circle with border-radius

Is a perfect solid circle drawn using the border-radius attribute. The method for drawing a solid circle is that the height and width are equal, and the border width is set to half of the height and width. The Code is as follows.

Copy to ClipboardReference: [www.bkjia.com] # circle {
Width: 200px;
Height: 200px;
Background-color: # a72525;
-Webkit-border-radius: 100px;
}

Hollow circle

Using the border-radius attribute to draw a hollow circle is similar to the method to draw a solid circle, but the width of the border can only be less than half of the height and width. The Code is as follows.

Copy to ClipboardReference: [www.bkjia.com] # circle {
Width: 200px;
Height: 200px;
Background-color: # efefef;/* Can be set to transparent */
Border: 3px # a72525 solid;
-Webkit-border-radius: 100px;
}

Dotted circle

 

Copy to ClipboardReference: [www.bkjia.com] # circle {
Width: 200px;
Height: 200px;
Background-color: # efefef;/* Can be set to transparent */
Border: 3px # a72525 dashed;
-Webkit-border-radius: 100px 100px 100px 100px;
}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page