A detailed description of the border property of CSS

Source: Internet
Author: User
Tags dashed line
Properties of the border

1.border-width: Percent not supported, support keyword, thin (1px), medium (default, 3PX, default is 3px because Border-style is only valid if border is 3px and above

Fruit), thick (5px)

2.border-style: There are different values, the following analysis for different values when the application

A.solid: can achieve triangle, trapezoid

<! DOCTYPE html>

B.dashed: Dashed line, in Chrome/firefox browser, the ratio of dashed lines to solid lines is 3:1 (sparse), in IE browser, the ratio is 2:1 (dense)

c.dotted: Dot line, in the Chrome/firefox browser, is the square point, in IE browser, is a dot (you can use the dot to achieve the fillet effect)

D.double: Double line, calculation rule, double line width is always equal, intermediate interval +-1, for example, 3px=1 (inner) +1 (intermediate interval) +1 (outside), can implement three-bar graphics.

E.inset (concave), outset (outer convex), Ridge (trench): Outdated style, poor compatibility, no use of scenes

3.border-color: When color is not specified, color is used as the border color, and you can use this feature to simplify the CSS style code when the link changes color. For example:

<! DOCTYPE html>

4. The border can be used to locate the background image, because the background image is not calculated when the border is located.

5. Using border to achieve a high-level layout, the disadvantage is that the percent width is not supported

(similar to 4,5, all using border to make a fixed distance from one side)

Related Article

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.