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.

Outlines

The outline is drawn outside the borders. It is a line drawn around elements. The following are the properties. We can set all these with a single shorthand property ?

outline-style:
outline-color:
outline-width:
outline-offset:

Syntax

The syntax of CSS outlines property is as follows ?

Selector {
   outline: /*value*/
}

Example

Let us see an example. You can clearly see the outline are even outside the borders ?

   


   
Demo Heading
   
This is a demo text

Borders

The borders are set using the border properties. The following are the properties. We can set all these with a single shorthand property ?

• border-style

• border-width

• border-color

Note ? The border-style is a must, else the border won?t be visible.

Syntax

The syntax of CSS border property is as follows ?

Selector {
   border: /*value*/
}

Example

Let us see an example ?

   


   
Demo Heading
   
This is a demo text

Example

The following example illustrate CSS outline and border property ?

   


   
Learning is fun
   
Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.
   
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

Example

Let us see another example ?

   


   
Kotlin Tutorial
   
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.