Borders provide visual separation between elements on a page. You can add borders around just about anything in HTML and there are a few border styles to choose from. Borders are added with the border CSS property.

When creating a border with CSS, you can set three things:

  1. Border thickness
  2. Border style
  3. Border color

These three items are set in a list, separated by a space. For example,

border: 1px solid black;

In this example, a border would be created and would be 1 pixel thick. The border would be solid and would be black in color.

Border Styles

  • Solid: A solid line
  • Dotted: A dotted line
  • Dashed: A line with a dash effect
  • Double: Two solid lines

Padding

The CSS padding property changes how close the text will come to the inside edge of the border. Padding can be added to move the text farther away from its borders. Padding can be applied to any element, regardless of whether it has borders, in order to move that element’s contents.

you can also add padding so that the contents move away from the top, bottom, right, or left, or any combination. This is accomplished with the padding-top, padding-bottom, padding-right, and padding-left properties, respectively.

Rounded Corners: border-radius

The border-radius property lets you create rounded corners without the need for images or additional markup. For example,

border-radius: 25px;

The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.