Posts in current category

CSS Border (Border)


May 03, 2021 21:00 CSS


Table of contents


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.

CSS border properties

CSS border properties allow you to specify the style and color of an element border.

Border style

Border style properties specify what boundaries to display.

CSS Border (Border) 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.

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Try it out . . .


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.

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Try it out . . .


Borders - Set the edges individually

In CSS, you can specify different side borders:

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Try it out . . .

The example above can also set a single property:

border-style:dotted solid;

Try it out . . .

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:

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.


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
border:5px solid red;

Try it out . . .


CSS Border (Border)

More instances

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.