Analysis on the principle of several Border-radius

Source: Internet
Author: User
  1. border-radius:40px;
  2. border-radius:40px/20px;
  3. border-radius:40px 20px;
  4. border-radius:40px 20px 10px 5px;

Today is mainly to test the above four kinds of border-radius.

First is the first kind.


A value is set here, so the default 4 corners are rounded with a radius of 40, and the blue box is a square of 40 pixels wide. So the radius of the circle is equal.

The second Kind


There's a/20px here besides 40px. Here is the meaning of the circle is defined as an ellipse, in fact, the circle is not a special case of the ellipse? This expression, though there is, is not usually used much.

Third Kind

border-radius:40px 20px;

The difference between this and the second is that there is no/symbol, and its meaning is the same as the normal set margin. is to represent the meaning of the upper and lower left. No nonsense directly look at the picture.

Fourth type

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

The fourth is to write the order, from the upper left corner clockwise to the lower left, which is the order of the value of the Border-radius property.

Reprint Please specify: From the blog park, Manfredhu

Thank you

Analysis on the principle of several Border-radius

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: 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.