Adding Borders Using CSS

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.

images/articles/css/css02.webp

1. Border

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

  1. Border width (thickness): The width of the border. This can be measured in any CSS unit, but border width is normally described in pixels (px) or em.
  2. Border style: CSS supports a number of border styles.
  3. Border color: The color used to display the border. The color can be defined like any other color in CSS, with color names or hex values.

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

border: 2px solid black;

In this example, a border would be created with 2 pixel thickness. The border would be solid and would be black in color.

Border Styles

You can choose any of these styles for any border:

  1. Solid: A single solid line around the element.
  2. Double: Two lines around the element with a gap between them. The border width is the combined width of both lines and the gap.
  3. Groove: Uses shading to simulate a groove etched in the page.
  4. Ridge: Uses shading to simulate a ridge drawn on the page.
  5. Inset: Uses shading to simulate a pressed-in button.
  6. Outset: Uses shading to simulate a button sticking out from the page.
  7. Dashed: A dashed line around the element.
  8. Dotted: A dotted line around the element.

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.

2. Padding

When you put a border, you often add breathing room, white space, between the border and what's inside it. 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.

For example,

.boxed {
 border: 5px solid red;
 padding: .5em;
}

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

3. Margin

You can put margins around paragraphs, headings, and many other HTML elements. A margin creates extra white space around the top, bottom, or sides of an element. For example,

.offset {
 margin: 2em 2em 2em 2em;
}

Here, the amount of white space is two times the size of default text. A more concise way to code equal margins on all four sides is

.offset {
 margin: 2em;
}

When you specify all four margins in one statement, you specify them in clockwise order, starting at the top. Instead of specifying all four margins, you can specify individual margins. For example,

margin-bottom: 1em;

You can also specify margin-top, margin-right, and margin-left.