CSS Border-radius Rounded Corners

Source: Internet
Author: User

This article transferred from: http://www.kwstu.com/Admin/ViewArticle/201409151549476225

The Border-radius property is primarily used to set the div fillet effect .

How to use

Border-radius: The radius value of the fillet + unit ;

Example 1 setting a div fillet radius of 10 pixels

border-radius:10px; sets the fillet radius of the object to 10 pixels.

Border-radius can set 1 to 4 values at a time1. If you set 1 values, this value is used to represent 4 fillets.
2. If you set two values, the upper-left and lower-right corners use the first value, the upper-right corner and the lower-left corner use the second value.
3. If you set three values, the upper-left corner uses the first value, the upper-right corner and the lower-left corner use the second value, and the lower-right corner uses the third value.
4, if you set four values, then the upper left corner, the upper right corner, the lower right corner, the lower left corner (clockwise order). Example 2 setting two value effects at a time

border-radius:10px 5px;

Example 3 setting three value effects at a time

border-radius:20px 10px 5px;

Example 4 setting four value effects at a time

border-radius:30px 20px 10px 5px;

settings for single rounded corners 1, Border-top-left-radius
2, Border-top-right-radius
3, Border-bottom-right-radius
4, Border-bottom-left-radius
Note: All four properties can be set from 1 to 2 values at the same time. If you set a value of 1, the horizontal radius is equal to the vertical radius. If you set 2 values, the first value represents a horizontal radius, and the second value represents the vertical radius. Example 5 single attribute set 1 values


Example 6 single attribute set 2 values

border-top-left-radius:10px 5px;    

Browser Support

IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4 support the Border-radius attribute above. Earlier versions of Safari and Chrome supported the-webkit-border-radius property, and earlier versions of Firefox supported-moz-border-radius properties, in order to ensure compatibility, You need to set both-moz-border-radius and Border-radius.
Note: The Border-radius must be placed in the final statement, otherwise it may fail.
In addition, earlier versions of Firefox had a single fillet statement that was slightly different from the standard syntax.
-moz-border-radius-topleft (Standard syntax: Border-top-left-radius)
-moz-border-radius-topright (Standard syntax: Border-top-right-radius)
-moz-border-radius-bottomleft (Standard syntax: Border-bottom-left-radius)
-moz-border-radius-bottomright (Standard syntax: Border-bottom-right-radius)

Recommendation: Depending on the browser, if the style and width of each rounded border are set individually, the display of each large browser may not be consistent, the safest way is to set the style and width of each rounded border to the same value, and avoid using percent values.

CSS Border-radius Rounded Corners

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.