CSS border

How to use borders in CSS

The border is a thin layer between padding and margins. Editing the border allows the element to draw its border on the screen.

You can use the following properties to work on the boundary:

  • border-style
  • border-color
  • border-width

PropertyborderCan be used as a shorthand for all these attributes.

border-radiusUsed to create rounded corners.

You can also use the image as a border, this is a function you giveborder-imageAnd its specific individual attributes:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

let us beginborder-style.

Border style

Thisborder-styleProperties allow you to choose the style of the border. The options you can use are:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

ViewThis CodepenGive a real example

The default value of the style isnone, So to make the border fully visible, you need to change it to something else.solidIn most cases it is a good choice.

You can use attributes to set different styles for each edge

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

Or you can useborder-styleUse multiple values to define them, using the usual up, down, left, and right order:

p {
  border-style: solid dotted solid dotted;
}

Border width

border-widthUsed to set the width of the border.

You can use one of the following predefined values:

  • thin
  • medium(Defaults)
  • thick

Or a value expressed in pixels, em or rem or any other valid length value.

example:

p {
  border-width: 2px;
}

You can use 4 values to set the width of each edge separately (up, down, left, and right).

p {
  border-width: 2px 1px 2px 1px;
}

Or you can use specific edge attributesborder-top-width,border-right-width,border-bottom-width,border-left-width.

Border color

border-colorUsed to set the color of the border.

If no color is set, the color of the text in the element will be used to color the border by default.

You can pass any valid color value toborder-color.

example:

p {
  border-color: yellow;
}

You can use 4 values to set the color of each edge separately (up, down, left, and right):

p {
  border-color: black red yellow blue;
}

Or you can use specific edge attributesborder-top-color,border-right-color,border-bottom-color,border-left-color.

Frontier shorthand attribute

The 3 attributes mentioned,border-width,border-stylewithborder-colorCan use shorthand property settingsborder.

example:

p {
  border: 2px black solid;
}

You can also use edge-specific attributesborder-top,border-right,border-bottom,border-left.

example:

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

Boundary radius

border-radiusUsed to set the rounded corners of the border. You need to pass a value that will be used as the radius of the circle that rounds the boundary.

usage:

p {
  border-radius: 3px;
}

You can also use edge-specific attributesborder-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius.

Use image as border

The cool thing about borders is the ability to style them with images. This allows you to use borders very creatively.

We have 5 attributes:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

And shorthandborder-image. Since the frame needs to be introduced in more depth as I can do in this chapter, I will not go into details here. I recommend readingCSS deceives almanac entries on border imagesFor more information.

Download mine for freeCSS Manual


More CSS tutorials: