May 03, 2021 CSS
CSS borders can be one or more lines around the content and margins of an element, for which you can customize their style, width, and color. With CSS border properties, we can create better results than in HTML.
CSS border properties allow you to specify the style and color of an element border.
Border style properties specify what boundaries to display.
The border-style property defines the style of the border
None: Borderless by default
Dotted: Define a dotted wireframe
Dashed: Defines a dotted wireframe
Solid: Defines solid boundaries
Double: Defines two boundaries. The width of the two boundaries is the same as the value of border-width
Groove: Defines the boundaries of the 3D groove. The effect depends on the color value of the boundary
Ridge: Defines the 3D ridge boundary. The effect depends on the color value of the boundary
inset: Defines a 3D embedded border. The effect depends on the color value of the boundary
Outset: Defines a 3D protruding border. The effect depends on the color value of the boundary
Try it: Style the border
You can specify a width for the border through the border-width property.
There are two ways to specify width for a border: you can specify a length value, such as 2px or 0.1em, or use one of three keywords, thin, medium (default), and thick.
Note: CSS does not define the specific width of the three keywords, so one user agent may set thin, medium, and thick to equal 5px, 3px, and 2px, respectively, while another user agent is set to 3px, 2px, and 1px, respectively.
The border-color property is used to set the color of the border, which can accept up to 4 color values at a time. Colors you can set:
You can also set the color of the border to Transparent.
Note: Border-color alone does not work and you must first use border-style to style the border.
In CSS, you can specify different side borders:
The example above can also set a single property:
The border-style property can have 1-4 values:
The above example uses border-style. However, it can also be used with border-width, border-color.
CSS2 introduces the border color value transparent, which is used to create a wide invisible border.
Transparent styles are defined as follows:
a:link, a:visited {
border-style: solid; border-width: 5px; border-color: transparent;
} a:hover {border-color: gray;}
With transparent, using a border is like an extra margin, and there's also the benefit of making it visible when you need it. T his transparent border is equivalent to an inner margin because the background of the element extends to the border area, if a visible background is visible.
The example above uses a number of properties to set the border.
You can also set a border in a property.
You can set it in the "border" property:
All border properties are in one declaration
This example demonstrates using short-case properties to set all four border properties in the same declaration.
Style the lower border
This example shows how to style the lower border.
Set the width of the left box
This example shows how to set the width of the left box.
Set the color of the four borders
This example shows how to color four borders.
You can set one or four colors.
Set the color of the right box
This example shows how to set the color of the right box.
Property | Describe |
---|---|
border | A short-case property that sets a property for four edges in a declaration. |
border-style | Used to style all borders of an element, or individually style borders for each edge. |
border-width | A short-case property that sets widths for all borders of an element, or individually for each border. |
border-color | Short-case properties that set the color of the visible parts of all borders of an element, or color each of the four edges. |
border-bottom | A short-case property that sets all the properties of the lower border into a declaration. |
border-bottom-color | Sets the color of the lower border of the element. |
border-bottom-style | Style the lower border of the element. |
border-bottom-width | Sets the width of the lower border of the element. |
border-left | Short-case properties that set all the properties of the left box to a declaration. |
border-left-color | Sets the color of the left frame of the element. |
border-left-style | Style the left box of the element. |
border-left-width | Sets the width of the left box of the element. |
border-right | Short-case properties that set all the properties of the right box to a declaration. |
border-right-color | Sets the color of the right box of the element. |
border-right-style | Style the right box of the element. |
border-right-width | Sets the width of the right box of the element. |
border-top | Short-case properties that set all the properties of the top border to a declaration. |
border-top-color | Sets the color of the upper border of the element. |
border-top-style | Style the upper border of the element. |
border-top-width | Sets the width of the upper border of the element. |