A brief analysis of CSS border properties: width & style & border, etc.

This article introduces to you a brief analysis of CSS border properties: width & style & border, etc. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Definition and Usage

One or more lines surrounding the content and padding of an element.

Basic attributes:Width, style, color

Width border-width

• ##border- The width shorthand property sets the width for all of the element's borders, or for each border individually.

• The value can be a specified length, such as 1px, or one of three keywords:

  thin,medium,thick, which are thin, medium (default) and thick.

• Only works when the border style is not none. If the border style is none, the border width is actually reset to 0. Negative length values are not allowed.

• The setting order of the borders is top-right-bottom-left. You can abbreviate it if you know the order.

Style border-style

The border-style property is used to set the style of the element border.

Value Description none Definition None frame. hidden Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts. dotted Define dotted border. Renders as a solid line in most browsers. dashed Define dashed line. Renders as a solid line in most browsers. solid Define a solid line. double Define double line. The width of the double line is equal to the value of border-width. groove Define the 3D groove border. The effect depends on the value of border-color. ridge Define the 3D ridge border. The effect depends on the value of border-color. inset Define the 3D inset border. The effect depends on the value of border-color. outset Define the 3D outset border. The effect depends on the value of border-color.

• The default value is

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

• You can define multiple styles for a border.

• The border may appear only if this value is not none.

Color border-color

The border-color property is used to set the color of the element border.

• 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 element's text color. On the other hand, if the element doesn't have any text, let's say it's a table containing only images, then the table's border color will be the text color of its parent element (since color can be inherited). This parent element is most likely body, p, or another table.

• The border can be set to transparent with the value

  transparent. This value is used to create an invisible border with width.

Border and background

The border is above the background of the element.

Border rounded corners

The rounded corner effect around the element is a frequently needed function. The

border-radiusattribute can set the rounded corners.

• Versions before ie9 are not compatible with the rounded corner attribute.

• The value is the specified length, such as 4px.

Extended attributes

border image border-image

Recommended related articles:

What are the formatting context (FC) types in css layout? Introduction to formatting context (FC) types

Introduction to two ways of CSS grid layout (Grid) (with code)

The above is the detailed content of A brief analysis of CSS border properties: width & style & border, etc.. For more information, please follow other related articles on the PHP Chinese website!