Understanding the difference between CSS Border and Outline

CSSWeb DevelopmentFront End Technology

The CSS border property is used to define the border properties for an element. It is a shorthand for border-width, border-style and border-color. Borders for individual sides can be styled and a border-radius can also be specified.

On the other hand, the CSS outline doesn’t take up space and is displayed around the border if set. It supports offset. Further, we can’t specify if individual sides should have an outline or not.

By default, both borders and outlines are not displayed.

Syntax

The syntax for CSS border and outline property is as follows −

Selector {
   border: /*value*/
   outline: /*value*/
}

Example

The following examples illustrate the CSS border and outline property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 15px;
   padding: 20px;
   width: 35%;
   border: thin solid green;
   outline-width: 5px;
   outline-style: ridge;
   outline-color: fuchsia;
   border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html>

Output

This gives the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 40px;
   padding: 12px;
   width: 30%;
   border: thick dashed green;
   outline: 5px inset;
   outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html>

Output

This gives the following output −

raja
Published on 06-Jan-2020 10:24:16
Advertisements