How to set border style in css

CSS (Cascading Style Sheet) is a markup language used for web design. It provides various styles and techniques to make web pages more vivid and beautiful. Among them, setting borders is a common style application. In this article, we will delve into how to set borders with CSS.

1. CSS border basics

Prerequisite knowledge: CSS borders are composed of lines, and the style, width and color of the lines can be set.

There are mainly the following attributes for setting borders in CSS:

1. border-style: border style, which can be solid (solid line), dotted (dotted line), dashed ( dashed line), double (double solid line), groove (3D groove line, border-color is invalid under this attribute), ridge (3D ridge line, border-color is invalid under this attribute), inset (3D insertion Line, border-color is invalid under this attribute), outset (the starting line of 3D, border-color is invalid under this attribute), none (no border).
2. border-width: Border width, which can be set to a specific pixel value or three predefined widths of thin, medium, and thick.
3. border-color: Border color, which can be set to a specific color value or transparent (transparent color).

These attributes can be set individually or combined together, for example:

border: 2px solid #000;

The above code indicates setting the border, with a width of 2 px, style solid, color black (#000).

2. CSS border style

The border style is very important and can determine the visual effect of the web page. The following are some common border styles:

1. solid border

The solid border is the most common one and can be set using the border-style: solid attribute.

Sample code:

.border-solid {
  border-style: solid;
  border-width: 2px;
  border-color: #000;
}

Rendering:

##Dotted border

Dotted border It is also a frequently used style, which can be set using the border-style: dotted attribute or border-style: dashed. In addition, you can also use border-style: double to set double solid lines, and you can also use border-style: ridge, border-style: inset, border-style: outset to set a 3D effect border.

Sample code:

.border-dotted {
  border-style: dotted;
  border-width: 2px;
  border-color: #000;
}

Rendering:

##Custom border

3. Except In addition to the above preset border styles, we can also customize borders. CSS provides the border-image attribute to allow us to customize the border. border-image needs to use a picture as the border. The four corners and four sides of the picture can be set to different widths respectively, so that the effect of a custom border can be achieved.

Sample code:

.border-img {
  border-image: url("border.png") 30 30 30 30 / 10px;
}

Rendering:

##3. CSS border rounded corners

The rounded border is very It is common and can add soft visual effects to web pages, and it also has many applications in card-style design.

CSS provides the border-radius attribute to set the arc degree of the border. It can control the arc of the four corners at the same time, and you can also set the rounded corner attribute of the border for a corner individually.

Sample code:

.border-radius {
  border: 2px solid #000;
  border-radius: 10px; /* 或者使用 border-radius: 10px 10px 10px 10px; */
}

Rendering:

##4. CSS border gradient

Using gradient borders can make The web page looks more high-end, and the gradient color can also be customized.

We can use the linear-gradient property in CSS3 to achieve the effect of gradient borders. The linear-gradient attribute is a gradient function that requires setting the gradient's color, direction, and starting position.

Sample code:

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(to right top, #ff8177, #ff867a, #ff8c7f, #f99185, #cf556c, #b12a5b, #8b0f4d, #610528) 1;
}

Rendering:

##5. Summary

This article mainly introduces CSS setting borders Basic knowledge, including border style, width, color, and effects such as rounded corners and gradients. The border style can be achieved through simple CSS property settings, and the border can also be customized, which can make the web page more unique and vivid.

The above is the detailed content of How to set border style in css. For more information, please follow other related articles on the PHP Chinese website!