Shulou(Shulou.com)06/01 Report--

This article is about how to use the border attribute in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS border

The border of an element is one or more lines around the content and inner margins of the element.

The CSS border attribute allows you to specify three aspects of the border of an element: style, width, and color.

By using the CSS border property, we can create an excellent border that can be applied to any element.

Border and background

The CSS specification states that the border is drawn "above the background of the element".

CSS2 points out that the background extends only to the inner margin, not the border.

CSS2.1 corrects: the background of the element is the background of the content, the inner margin, and the border area.

Most browsers follow the CSS2.1 definition, but some older browsers may behave differently.

Tip: some borders are "intermittent" (such as dotted borders), and the background of the element appears between the visible parts of the border.

The style of the border

Style is the most important aspect of the border, style controls the display of the border, if there is no style, there will be no border at all.

The border-style attribute of CSS defines 10 different non-inherit styles, including none.

For example, you can define the frame of a picture as outset to make it look like a "raised button":

A:link img {border-style: outset;}

Define multiple styles

You can define multiple styles for a border (in top-right-bottom-left order), for example:

P.aside {border-style: solid dotted dashed double;}

Note: defines the border style for aside: the top border of a solid line, the right border of a dotted line, the lower border of a dashed line, and a left border of a double line.

Define one-sided styl

If you want to style a border for one of the edges of an element box, you can use the following single-sided border style properties:

Border-top-style

Border-right-style

Border-bottom-style

Border-left-style

So the two methods are equivalent:

P {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}

Note: if you want to use the second method, you must put the unilateral attribute after the abbreviated attribute, otherwise it will be overwritten by the abbreviated attribute.

The width of the border

You can specify the width of the border through the border-width property. There are two ways to specify a width for a border:

Specify length values, such as 2px or 0.1 em, or use keywords: thin, medium (default), and thick.

Note: CSS does not define the specific width of three keywords and is set by the user agent stylesheet (browser style).

P {border-style: solid; border-width: 5px;} p {border-style: solid; border-width: thick;}

Define unilateral width

You can set the borders of elements in the order of top-right-bottom-left:

P {border-style: solid; border-width: 15px 5px 15px 5px;}

The above example can also be abbreviated as (this is called value replication):

P {border-style: solid; border-width: 15px 5px;}

You can also set the width of each side of the border with the following properties:

Border-top-width

Border-right-width

Border-bottom-width

Border-left-width

Therefore, the following rules are equivalent to the above example:

P {border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px;}

No border

In the previous example, if you want to display some kind of border, you must set the border style, such as solid or outset.

So what happens if you set border-style to none:

P {border-style: none; border-width: 50px;}

Note: although the width of the border is 50px, the border style is set to none. At this point, the width of the border also becomes 0.

Tip: if the border style is none, it means that the border does not exist at all (no border), and the border width is automatically set to 0.

Note: it is a common mistake to forget to declare the border style. For example, the H2 element in the following rule does not have any borders:

H2 {border-width: 20px;}

Because the default value for border-style is none, if the style is not declared, it is equivalent to border-style: none.

Therefore, if you want the border to appear, you must declare a border style.

The color of the border

CSS uses a simple border-color property to set the border color, which can accept up to four color values at a time.

You can use any type of color value, such as named color, hexadecimal and RGB values:

P {border-style: solid; border-color: blue rgb (25%, 35%, 45%) # 909090 red;}

Tip: if the color value is less than 4, the value copy will work.

For example, the following rule declares that the top and bottom borders of a paragraph are blue and the left and right borders are red:

P {border-style: solid; border-color: blue red;}

Note: the default border color is the foreground color of the element itself. If no color is declared for the border, it will be the same as the text color of the element. On the other hand, if the element does not have any text, suppose it is a table that contains only images, then the border color of the table is the text color of its parent element (because color can inherit). This parent element is most likely body, div, or another table.

Define unilateral color

There are also some one-sided border color properties. They work in the same way as unilateral style and width attributes:

Border-top-color

Border-right-color

Border-bottom-color

Border-left-color

For example, to specify a solid black border for an H2 element and a solid red border on the right, you can specify:

H2 {border-style: solid; border-color: black; border-right-color: red;}

Transparent border

If the border has no style, it has no width. In some cases, however, you may want to create an invisible border.

CSS2 introduces the border color value transparent. This value is used to create an invisible border with width.

A:link, a:visited {border-style: solid; border-width: 5px; border-color: transparent;} a:hover {border-color: gray;} AAA BBB CCC

Note: with transparent, using a border is like an extra margin, making it visible when you need it.

Note: this transparent border is equivalent to the inner margin because the background of the element extends to the border area (when there is a visible background).

Tip: previous versions of IE7 did not support transparent,IE to set the border color based on the color value of the element.

All border properties are in one declaration

P {border: medium double rgb (250 0255)}

Some text

Note: this example demonstrates the use of abbreviated properties to set all four border properties in the same declaration.

Set the border

P.one {border-style: solid} p.two {border-style: solid double} p.three {border-style: solid double groove} p.four {border-style: solid double groove dotted} p.B-width {border-style: solid; border-width: 5px 10px 1px medium} p.B-color {border-style: solid; border-color: # ff0000 # 00ff00 # 0000ff rgb (250Power0255)} p.B-bottom {border-style: solid; border-bottom: thick dotted # ff0000 } p.other {border-style: solid; border-top-style: dotted; border-right-width: thin; border-bottom-color: # ff0000; border-left: thick double # ff0000;}

Note: it is not valid to use the "border-width" attribute alone, please first use the "border-style" property to set the border.

Note: it is not valid to use the "border-color" attribute alone, please first use the "border-style" property to set the border.

CSS border properties and description

Border: abbreviated attribute, which is used to set the property for four sides in a declaration.

Border-style: used to style all borders of an element, or to style borders individually for each edge.

Border-width: lets you set the width for all borders of an element, or individually for each border.

Border-color: sets the color of the visible parts of all borders of the element, or sets the color for each of the four edges.

Border-top: shorthand attribute, used to set all the properties of the upper border into a declaration.

Border-right: abbreviated properties, used to set all the properties of the right border into a declaration.

Border-bottom: shorthand attribute, used to set all the properties of the border below into a declaration.

Border-left: abbreviated attributes, used to set all the properties of the left border into a declaration.

Border-left-color: sets the color of the left border of the element.

Border-left-style: style the left border of the element.

Border-left-width: sets the width of the left border of the element.

Thank you for reading! This is the end of this article on "how to use border attributes in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.