Border properties in CSS, syntax and examples


In the previous CSS lesson, Taimienphi.vn introduced you to the table format properties in CSS. In the next article below, Taimienphi.vn will introduce you more about the border attribute in CSS.


Use properties border in CSS to specify the style, width and border color of the element. Refer to the following article of Taimienphi.vn to learn the border properties in CSS.

The border attribute in CSS

Table of Contents:
1. The border-style property in CSS
2. The border-width attribute
3. Border-color attribute
4. Create a border for each part
5. Attractive border attribute
6. The border-radius attribute
7. Border properties in CSS

The border attribute in CSS

1. The border-style property in CSS

Properties border-style In CSS determines the type of border to be displayed.

This property includes values:
– dotted: define dotted borders.
– dashed: define dashed borders.
– solid: define solid borders.
– double: define double contour.
– groove: define contour 3D grooves. The effect depends on the border-color value.
– ridge: Define contour lines for apexes. The effect depends on the border-color value.
– inset: Define borders for inner shadow lines. The effect depends on the border-color value.
– outset: define the outline for the outer shadow line. The effect depends on the border-color value.
– none: no borders.
– hidden: Identify hidden borders.

Properties border-style can include from 1 to 4 values ​​(for top border, right border, bottom border and left border).

For example:

filter the border in css

The output will look like the following:

border refined in css 2

2. The border-width attribute

Properties border-width in CSS specify the width of 4 borders.

The unit of width can be px, pt, cm, em, … or one of the three predefined values ​​of thin, medium or thick.

Properties border-width can include from 1 to 4 values ​​(for top border, right border, bottom border and left border).

For example:

border refined in css 3

The output will look like the following:

border refined in css 4

3. Border-color attribute

Properties border-color Used to set colors for 4 borders.

Color values ​​are set by:
– Name: specify a name of any color, such as red.
– Hex: specify hex values, such as # ff0000.
– RBG: specify the RBG value, such as rgb (255,0,0).
– Transparent properties.

This attribute can include 1 to 4 values ​​(for the top border, right border, bottom border, and left border).

If border-color If not set, border color will be the element’s color.

For example:

border refined in css 5

The output will look like the following:

border refined in css 6

4. Create a border for each part

In the examples above we can specify, create different borders for each part (top border, left, right and bottom borders).

In CSS there are also properties to specify, creating each border (top, bottom, right and left).

For example:

border refined in css 7

The output will look like the following:

border refined in css 8

In the example above:

If attributes border-style There are 4 values:
border-style: dotted solid double dashed;
The tip of the ridge is the dashed line.
The right border immediately.
The bottom border is the double border.
The left border is the dashed border.

If attributes border-style There are 3 values:
border-style: dotted solid double;
The tip of the ridge is the dashed line.
The left and right borders are solid borders.
The bottom border is the double border.

If attributes border-style There are 2 values:
border-style: dotted solid;
Top and bottom borders are dashed.
The left and right borders are solid borders.

If attributes border-style has 1 value:
border-style: dotted;

All 4 lines are dashed borders.

5. Attractive border attribute

To shorten the code, we can declare all border properties in a single attribute.

Border is a shortened property of the following properties:
border-width
border-style (required)
border-color
For example:

border refined in css 9

The output will look like the following:

border refined in css 10

In addition, we can also declare all individual border properties for a part (left, right, top, bottom) in a single attribute.

Example 1:

border border in css 11

The output will look like the following:

border refined in css 12

Example 2:

border border in css 13

The output will look like the following:

border border in css 14

6. The border-radius attribute

Properties border-radius is used to round the border of an element.

border refined in css 15

The output will look like the following:

border border in css 16

Note: The border-radius attribute does not support IE8 and earlier versions.

7. Border properties in CSS

Below is a list of the CSS border properties:

border border in css 17

border refined in css 18

https://thuthuat.taimienphi.vn/thuoc-tinh-border-in-css-50591n.aspx
The above CSS lesson Taimienphi.vn has just introduced you to the border properties in CSS. In the next CSS lessons Taimienphi.vn will introduce you further Margin attribute in CSS Please.

.

Add a Comment

Your email address will not be published. Required fields are marked *