How to set div border with css

CSS is an important part of HTML and is used to style web pages. Among them, setting div borders is one of the most basic functions of CSS. It can change the border style, size, color and other attributes of divs in the web page, thereby making the web page more beautiful and hierarchical. This article will introduce in detail how to set div borders and provide some practical examples for readers' reference.

1. CSS Style Sheets

Before we start learning CSS style sheets, we first need to understand what a style sheet is. A style sheet is a set of rules that define styles that can be applied to different elements of a web page, such as text, links, pictures, tables, etc. Style sheets can be referenced as internal style sheets or external style sheets. Internal style sheets are written directly in HTML documents, while external style sheets are stored on the server in the form of CSS files and are referenced by HTML documents.

2. Set div border with CSS

Let us introduce in detail how to set div border.

1. Set the border style

There are many choices for the border style of div, such as solid line, dotted line, dotted line, etc. We can use the border-style attribute to set the border style. The syntax is as follows:

div {
    border-style: solid;
}

In the above example, we set the border style of the div to solid line. Other available border styles are as follows:

##noneNo borderhiddenhidden borderdotteddotted borderdashedDotted bordersolidsolid borderdoubleDouble-line bordergroove3D concave borderridge3D convex borderinset3D inner borderoutset3D outer border

Border style	Description

2. Set the border size

Setting the div border size is also very simple. We can use the border-width attribute to set the width of the border. The value can be pixels, percentages or predetermined Size, for example:

div {
     border-width: 2px;
}

In the above example, we set the div border width to 2 pixels.

3. Set the border color

Color is one of the important elements in CSS and one of the key factors in setting the div border. We can use the border-color attribute to set the border color. The syntax is as follows:

div {
     border-color: red;
}

In the above example, we set the div border color to red. You can use all color values ​​supported by CSS to set the border color, such as Color names (red, blue, green, etc.), hexadecimal values ​​(#FF0000, #0000FF, etc.), RGB values ​​(rgb(255, 0, 0), rgb(0, 0, 255)), etc.

4. Set border rounded corners

In addition to the above three basic properties, we can also use the border-radius attribute to set border rounded corners. The syntax is as follows:

div {
     border-radius: 10px;
}

In the above example, we set the corner radius of the div border to 10 pixels. You can also set the fillet size of each corner of the border, for example:

div {
     border-top-left-radius: 10px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 25px;
}

In the above example, we set the fillet radius of the four corners of the div border respectively. Of course, you can also set only a certain direction. of rounded corners.

3. Examples of CSS setting div borders

The following are some practical div border examples for readers’ reference:

1. Solid border

div {
     border-style: solid;
     border-width: 2px;
     border-color: black;
}

The above settings will draw a solid black border with a width of 2 pixels around the div.

2. Dotted border

div {
     border-style: dashed;
     border-width: 2px;
     border-color: red;
}

The above settings will draw a red dotted border with a width of 2 pixels around the div.

3. Rounded border

div {
     border-style: solid;
     border-width: 2px;
     border-color: blue;
     border-radius: 20px;
}

The above settings will draw a solid blue border with a width of 2 pixels and a rounded corner radius of 20 pixels around the div.

4.3D border

div {
     border-style: groove;
     border-width: 2px;
     border-color: green;
}

The above settings will draw a green 3D concave border with a width of 2 pixels around the div.

4. Summary

This article introduces in detail how to use CSS to set div border style, size, color and other attributes, and provides some practical examples for readers' reference. By mastering these basic knowledge, readers can better design CSS styles and make web pages look more beautiful and layered.

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