Home > Article > Web Front-end > 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:
Border style | Description |
---|---|
No border | |
hidden border | |
dotted border | |
Dotted border | |
solid border | |
Double-line border | |
3D concave border | |
3D convex border | |
3D inner border | |
3D outer border |
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 bordersThe 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. SummaryThis 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!