Menu
CSS

Outline Property

The outline property in CSS is used to draw a line around an element, outside the border edge. It is similar to the border property but differs in a few key ways:

  1. Outlines do not take up space in the layout.
  2. Outlines may be non-rectangular in some cases (e.g., around elements with rounded corners).

 

Outline vs. Border

  • Outline: Drawn outside the border edge and does not affect the element's size or position.
  • Border: Drawn inside the border edge and does affect the element's size and position.

 

Outline Property Syntax

The outline property is a shorthand for setting the following individual properties:

  • outline-color
  • outline-style
  • outline-width

 

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Property Example - Codersmile.com</title>
</head>
<body>
    <div class="box">
        This box has an outline.
    </div>
</body>
</html>
<style>
/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid #000;
    margin: 10px;
    background-color: #f0f0f0;
    outline: 2px dashed #ff0000; /* Outline: 2px width, dashed style, red color */
}

</style>
  • The .box element has a solid black border and a dashed red outline.
  • The outline is drawn outside the border and does not affect the box's size or position.

 

Outline Offset

The outline-offset property allows you to control the space between the outline and the border edge. This can be useful for creating more visually appealing designs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outline Offset Property Example - Codersmile.com</title>
</head>
<body>
    <div class="box">
        This box has an  outline-offset.
    </div>
</body>
</html>

<style>
body {
    font-family: Arial, sans-serif;
}

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid #000;
    margin: 10px;
    background-color: #f0f0f0;
    outline: 2px dashed #ff0000; /* Outline: 2px width, dashed style, red color */
    outline-offset: 10px; /* Space between border and outline */
}
</style>
  • The outline-offset property adds a 10px space between the border and the outline, making the outline appear further from the box.
CSS