CSS Border (Border)

CSS border

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.

Border style

Border style properties specify what boundaries to display.

The border-style property defines the style of the border

Border-style value:

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

---

The width of 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.

---

Border color

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:

• name - specifies the name of the color, such as "red"
• RGB - Specifies RGB values, such as "rgb (255,0,0)"
• Hex - Specifies a 16-step value, such as "#ff0000"

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.

---

Borders - Set the edges individually

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:

• border-style:dotted solid double dashed;
  • The top border is dotted
  • The right box is solid
  • The bottom border is double
  • The left box is dashed
  
  
• border-style:dotted solid double;
  • The top border is dotted
  • The left and right boxes are solid
  • The bottom border is double
  
  
• border-style:dotted solid;
  • The top and bottom borders are dotted
  • The left and right boxes are solid
  
  
• border-style:dotted;
  • The four-sided border is dotted

The above example uses border-style. However, it can also be used with border-width, border-color.

---

Transparent border

CSS2 introduces the border color value transparent, which is used to create a wide invisible border.

Transparent styles are defined as follows:

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.

---

Border - Short case property

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:

• border-width
• border-style (required)
• border-color

---

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.

---

CSS border properties

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.