CSS Outline and Border

« Prev Next »

Outline and border both draw a line around an element. When creating a line around an element both options have their unique characteristics and behaviors.

There are differences between border and outline in CSS3 that you should know to decide on what you can use for the layout and design of your web pages.

css-outline-and-border

CSS Border

The border is used to draw the line around an element. This is part of the box model and included in the calculation of the width and height of an element.

 

Syntax

 selector {
  outline: width style color;
}
  • width: Specifies the thickness of the outline (e.g., 1px, 3px).
  • style: Defines the outline’s style (e.g., solid, dotted, double).
  • color: Specifies the color of the outline (e.g., red, #ff0000).

Border Styles

Value Description
solid A solid, continuous line.
dashed A series of short, broken lines.
dotted A series of round dots.
double Two solid lines with space between them.
none No border (useful for removing default borders).
hidden Hides the border (used with table elements).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      border: 3px dashed blue; /* Blue dashed border */
      padding: 20px;
    }
  </style>
</head>
<body>

<div>This div has a blue dashed border.</div>

</body>
</html>
Run ›

CSS Outline

The outline property is very similar to the border, the only difference is that the outline does not take any space within the box model of an element. This means that the outline does not affect the layout of the page as it does not take up any space on the page.

The outline is mostly used for highlighting an element. It is also commonly used with interactive elements like buttons and input fields.

selector {
  outline: width style color;
}

Outline Characteristics

  • Does not take up space: The outline is drawn outside the element, without affecting the size of the element.
  • No effect on layout: Unlike borders, the outline will not cause the element to resize or affect the layout around it.
  • Can have multiple outlines: You can use multiple outlines on the same element by applying the outline property multiple times.

Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      outline: 5px solid green; /* Solid green outline */
      padding: 20px;
    }
  </style>
</head>
<body>

<div>This div has a green solid outline.</div>

</body>
</html>
Run ›

Differences Between Outline and Border

Feature Border Outline
Placement Inside the element's box, part of the box model. Outside the element, does not affect the box model.
Affects Layout Yes, it affects the element's total size (width/height). No, it does not affect the layout or size.
Visibility Visible inside the element's content area. Always visible outside the element’s box.
Multiple Application Only one border per side per element. Multiple outlines can be applied to an element.
Use Cases Typically used for defining edges or borders around elements (e.g., boxes, images). Often used for focus or highlighting purposes (e.g., focus on input fields, buttons).

When to Use Outline vs Border

  • Use border when you need a permanent boundary or edge around an element, such as a box or card component.
  • Use outline when you need to highlight an element temporarily (such as for focus states), or when you want to emphasize an element without affecting the layout.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.