Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to use border border properties in CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use border frame attributes in CSS" can help you solve your doubts.

CSS border property border

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

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

CSS border

In HTML, we use tables to create borders around text, but by using the CSS border property, we can create good borders that can be applied to any element.

Inside the outer margin of the element is the border of the element. The border of an element is one or more lines around the content and inner edges of the element.

Each border has three aspects: width, style, and color. In the following space, we will explain these three aspects in detail for you.

Border and background

The CSS specification states that the border is drawn "above the background of the element". This is important because some borders are "intermittent" (for example, dotted borders or dashed borders), and the background of the element should appear between the visible parts of the border.

CSS2 points out that the background extends only to the inner margin, not the border. Later, CSS2.1 corrected: 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.

The style of the border

Style is the most important aspect of the border, not because the style controls the display of the border (of course, the style does control the display of the border), but because 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:linkimg {border-style:outset;}

Define multiple styles

You can define multiple styles for a border, such as:

P.aside {border-style:soliddotteddasheddouble;}

The above rule defines four border styles for a paragraph named aside: the top border of the solid line, the right border of the dotted line, the lower border of the dotted line, and a double-line left border.

We also see that the values here are in the order of top-right-bottom-left, which is also seen when we discuss setting different inner margins with multiple values.

Define one-sided styl

If you want to style one of the edges of an element box instead of all four sides, 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:solidsolidsolidnone;} 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. Because if you put a unilateral attribute before border-style, the value of the abbreviated attribute will override the unilateral value none.

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: you can specify a length value, such as 2px or 0.1m, or you can use one of three keywords, which are thin, medium (the default), and thick.

Note: CSS does not define the specific width of the three keywords, so one user agent may set thin, medium, and thick to equal 5px, 3px, and 2px, respectively, while the other user agent may be set to 3px, 2px, and 1px, respectively.

So, we can set the width of the border like this:

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

Or:

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:15px5px15px5px;}

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

P {border-style:solid;border-width:15px5px;} 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, you have seen that 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;} although the width of the border is 50px, the border style is set to none. In this case, not only is the style of the border gone, but its width also becomes 0. The frame is gone. Why?

This is because if the border style is none, that is, the border does not exist at all, then the border cannot have a width, so the border width is automatically set to 0, regardless of what you originally defined?

It is very important to remember this. In fact, it is a common mistake to forget to declare the border style. According to the following rules, all H2 elements do not have any borders, let alone 20 pixels wide:

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

Setting the border color is very simple. CSS uses a simple border-color property that accepts 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:bluergb (25%, 35%, 45%) # 909090;}

If the color value is less than 4, the value copy will work. For example, the following rule declares that the upper and lower borders of the paragraph are blue and the left and right borders are red:

P {border-style:solid; border-color:bluered;}

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

To specify a solid black border for the 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

As we just said, if the border has no style, there is 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. Take a look at the following example:

AAAa > BBBa > CCCa >

We have defined the following styles for the above link:

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

In a sense, using a border with transparent is like an extra margin; another benefit is that it can be made visible when you need it. This transparent border is equivalent to the inner margin because the background of the element extends to the border area (if there is a visible background).

Read here, this "how to use border border properties in CSS" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

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.