[Basic] 5 ways to implement multiple borders in CSS

Original: [Basic] 5 ways to implement multiple borders in CSS

Briefly

The most elegant way to implement multiple borders at present is to use CSS3the box-shadowproperty of , but if you want to be compatible with older browsers, you need to choose another solution. This article briefly lists several implementation schemes of multiple borders. You can choose the most suitable implementation scheme according to the actual project and compatibility requirements.

1 Use the stroke ( outline) property

Option 1 uses the stroke ( outline) property in combination with the borderproperty to achieve a double border. This solution is simple to implement, has good compatibility, and is compatible with IE6,7other browsers.

1.1 Core code

.borders {
  border: solid 6px #fff;
  outline: solid 6px #888;  
}

1.2 Demonstration program

demo program

1.3 Description

• Only double borders are possible
• The border style is flexible, which can realize the border of dashed line and other styles
• The stroke is outside the box model and will overlap with external elements

2 Take advantage of additional DIVs

Scheme 2 uses additional DIV nesting to achieve multiple borders. This is also the only solution without compatibility issues.

2.1 Core code

.outer {
    border: solid 6px #888;
    background: #fff;
}
.inner {
    background: #222;
    margin: 6px;
}

2.2 Demonstration program

demo program

2.3 Description

• good compatibility
• Multiple borders, dashed borders and other styles can be realized
• Requires additional DIV elements, increasing code complexity

3 Use pseudo-elements

Scheme 3 uses pseudo-elements ( :before) to achieve double borders. The implementation code is slightly complicated, which belongs to the implementation of hack and is not recommended.

3.1 Core code

.borders {
    border: solid 6px #fff;
    position: relative;
}
.borders:before {
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border: solid 6px #888;
}

3.2 Demonstration program

demo program

3.3 Description

• IE6,7,8incompatible
• can :afteralso be used
• Simultaneous application :beforeand :aftercan achieve triple border

4 Take advantage of border-imageproperties

Scheme 4 utilizes CSS3the border-imageproperties to implement multiple borders. The implementation method is simple, but it needs to make an extra border image, which is less compatible.

4.1 Core code

.borders {
    border: solid 12px transparent;
    border-image: url('borders.jpg') 12 12 12 12 repeat;
}

4.2 Demonstration program

demo program

4.3 Description

In this example, border-image-slicethe border image is divided into 9 areas as shown in the following figure:

It includes four corners (1, 2, 3, 4), four sides (5, 6, 7, 8) and a middle area (9).
repeatRepresents a tile where all four sides are repeated on the corresponding border.

5 Take advantage of box-shadowproperties

Scheme 5 uses box-shadowattributes to implement multiple borders. Option 5 is the easiest and most direct way to implement multiple borders. You can achieve multiple border effects with just one line of code. The use of shadows ( box-shadow) to achieve borders is somewhat hacky.

5.1 Core code

.borders {
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

5.2 Demonstration program

demo program

5.3 Description

In order to simulate the border with shadows, in this example, two shadow effects are used, the offset and blur values 0​​are set, and the size of the shadow is set appropriately, thus achieving the effect of double borders. Because one shadow overlaps the other, the size of the second shadow is set to be twice the size of the first shadow. The key part is setting the blur value to 0, which results in a solid shadow like the border that looks the same as the border.

Like the stroke( outline) property, the box-shadowproperty may overlap surrounding elements, so set the element's margins appropriately. box-shadowCompatibility is average.

6 Reference

MDN border-image

MDN box-shadow

Multiple Borders with CSS

CSS-tricks Multiple Borders

7 Conclusion

This article briefly describes the implementation of 5 kinds of multiple borders, each with its own advantages and disadvantages, we should choose according to the actual situation.

Some of the text and code described in this article are compiled on the Internet. Due to lack of time, limited ability and other reasons, there are many problems such as inaccurate text description and insufficient code testing.