Outlines Vs Borders in CSS

CSS Web Development Front End Technology

Outline doesn’t take up space and is displayed around the border if set. It is used for highlighting elements and we can’t specify whether individual sides should have an outline or not. Like borders, outline is not displayed by default. In some browsers, say Firefox, focused elements are displayed with a thin outline.

Borders can be customized to a greater extent. We style individual sides of a border and round their edges. Borders take up space and affect the box-sizing.

Syntax

The syntax of CSS border property is as follows −

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

Example

The following examples illustrate CSS outline and border property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   display: flex;
   float: left;
   margin: 20px;
   padding: 12px;
   width: 30%;
   outline: thin dotted;
   background-color: lavender;
}
p + p {
   width: 250px;
   outline: none;
   border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
article {
   margin: auto;
   width: 70%;
   outline: thick double;
   background-color: lightgoldenrodyellow;
}
h3 {
   border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html>