The best CSS Border (Borders) Tutorial In 2024, In this tutorial you can learn CSS border properties,Border Style,border-style value:,Border Width,Examples,Border Color,Examples,Border - separate settings for each side,Examples,Examples,Border - shorthand property,Examples,More examples,CSS border properties,
CSS border properties allow you to specify an element's border style and color.
Border style property specifies what kind of border to be displayed.
border-style property is used to define the style of the border
none: No default border
dotted: dotted: Defines a marquee
dashed: Defines a dashed box
solid: the definition of solid border
double: define two boundaries. The same values of the two border width and border-width of
groove: groove defined 3D border. The effect depends on the color values of the boundary
ridge: the definition 3D ridge border. The effect depends on the color values of the boundary
inset: Defines a 3D embedded border. The effect depends on the color values of the boundary
outset: Defines a 3D outset border. The effect depends on the color values of the boundary
Try: set the border style
You can specify the width of the border by the border-width attribute.
Specifies the width for the border in two ways: You can specify the length of the value, such as 2px or 0.1em; or use one of the three keywords, which are thin, medium (default) and thick.
Note: CSS does not define three keywords specific width, so a user agent may be the thin, medium and thick respectively set equal to 5px, 3px, and 2px, while another user agent, respectively, set to 3px, 2px and 1px.
border-color property sets the color of the border. You can set the color:
You can also set the border color to "transparent".
Note: border-color alone does not work, you must have to use the border-style to set the border style.
In CSS, you can specify different sides different borders:
The above example can also set a single attribute:
border-style property can have one to four values:
The above example uses the border-style. However, it can also be border-width, border-color together.
The above example uses a lot of property to set the border.
T You can also set the border in a property.
You can "border" attribute set:
All border properties in one declaration being
This example demonstrates a shorthand property to set all four border properties in the same statement.
Setting border style
This example demonstrates how to set the style of the bottom border.
Setting the width of the left border
This example demonstrates how to set the width of the left border.
Set the color of the four borders
This example demonstrates how to set the color of the four borders. You can set one to four colors.
Set the color of the right border
This example demonstrates how to set the color of the right border.
Attributes | description |
---|---|
border | Shorthand property used to set the property of the four sides in a statement. |
border-style | It is used to set the border style of all the elements, or separately set the border style for each side. |
border-width | All border shorthand property sets the width for the element, or individually set the width to each side of the border. |
border-color | Shorthand property, the element of all visible colors border portion, or set the color, respectively four sides. |
border-bottom | Shorthand property used to set all the attributes of the border to a statement. |
border-bottom-color | Set the color of the bottom border of the element. |
border-bottom-style | Setting the border style elements. |
border-bottom-width | Set the width of the bottom border of the element. |
border-left | Shorthand property used to set all the left border properties to a statement. |
border-left-color | Set the color of the left border element. |
border-left-style | The element of the left border style. |
border-left-width | The element of the left border width. |
border-right | Shorthand property for setting all of the properties to the right of the box to a statement. |
border-right-color | Set the color of the right border element. |
border-right-style | The element of the right border styles. |
border-right-width | Set the width of the right border element. |
border-top | Shorthand property for setting all of the properties on the border to a statement. |
border-top-color | Element is set on the color of the border. |
border-top-style | Element is set on the border style. |
border-top-width | Element is set on the width of the border. |