8.css border, css rounded border

8.css border, css rounded border

In fact, instead of calling the css box model a box, I prefer to call it a card or a picture. Compared with the 3D effect of a box, the elements of a webpage are more like two-dimensional pictures. However, we adjust the size of elements, more like the canvas.

However, just as I can configure a frame for a painting, I can also set a border for the element.

Attribute	Value	Description	CSS version
Border-width	Length Value	Set the Border width. Optional.	1
Border-style	Style name	Required to set the border style.	1
Border-color	Color value	Set the border color. Optional.	1

The border can appear only when border-style is declared. The default value is displayed for the other two attributes. The default width is 3px, and the default color is black.

/* Simple setting */div {border-style: solid;}/* Complete setting */div {border-style: solid; border-width: 2px; border-color: red ;}

Note: When I set a frame for the painting and took it to the museum (that is, the webpage) for exhibition, the size of the painting seen by visitors in the museum is no longer the size of the canvas, but the canvas with a border. Here, the border is set for one of the sides, that is, the true width and height should be changed to X 2 of the canvas + border.

The detailed usage of each attribute is summarized below.

1. Border Width

Value	Description
Length Value	CSS length values: such as px and em
Percentage	Set the percentage directly: 1, 2, 3, etc.
Thin	Use the default width of the length name. The specific meanings of these three values are defined by the browser, which increases from small to large.
Medium
Thick

 

 

2. Border Style

Value	Description
None	No border
Dashed	Broken Line border
Dotted	Dot line Border
Double	Double-line Border
Groove	Groove border
Inset	Borders that make element content embedded
Outset	Border that gives the element content a convex Effect
Ridge	Spine border
Solid	Solid border

 

3. border color

The border color has no special values. For more information about how to set the border color, seeCss colorThis blog.

 

4. Customization

The above settings are for the four sides, which is equivalent to buying a set of borders. However, we can customize the four sides as needed.

Attribute	Description	CSS version
Border-top-width Border-top-style Border-top-color	Define the top	1
Border-bottom-width Border-bottom-style Border-bottom-color	Define bottom	1
Border-left-width Border-left-style Border-left-color	Define left	1
Border-right-width Border-right-style Border-right-color	Define right	1

 

/* As long as one of the edges */div {border-top-style: solid; border-top-width: 10px; border-top-color: red ;}

 

 

 

5. shorthand settings

In order to increase sales, sellers have also improved the quick order service,When the four changes are the same, there is no need to write three styles. You can simply use the shorthand:

Attribute	Value	Description	CSS version
Border	<Width> <style> <color>	Set the border of the Four Sides	1
Border-top		Only set the upper border
Border-bottom		Set only the bottom border
Border-left		Set only the left border
Border-right		Set only the right border

 

/* Four Edges in simplified form */div {border: 10px solid red ;}

 

 

6. rounded border

Although merchants provide borders of various styles, these borders are always positive. In order to meet the customer's requirements, merchants have obtained a batch of new products and began to provide rounded border borders.

Attribute	Value	Description	CSS version
Border-radius	Length value or percentage	Four Corners	3
Border-top-left-radius		Top left corner
Border-top-right-radius		Top right corner
Border-bottom-left-radius		Bottom left corner
Border-bottom-right-radius		Bottom right corner

 

/* Set the rounded rectangle */div {border: 10px solid red; border-radius: 10px;}/* set the four sides respectively */div {border: 10px solid red; border-radius: 10px 20px 30px 40px ;}