CSS Outline

Prev
Next

CSS outline

So, what is the CSS Outline? 

It is an outer line which is drawn outside the borders of an element.

CSS outline Examples

border-radius circle without any Outline

border-radius circle with Green color Outline

Blue Dotted Outline outside the border

Red outline around a dotted border

CSS Outlines cheat sheet

There are 2 ways to set the CSS Outline Properties-

  1. Using the Individual Outline properties which are Outline Width, Outline Style, Outline Color & Outline Offset.
  2. Using shorthand Outline property

Let’s see both of these in detail.

1. CSS Outline individual properties

For CSS Outline, either you can define individual outline properties or you can provide the shorthand CSS Outline Properties depending upon your choice.

Let us see how we can define the individual CSS Outline Properties. There are 4 individual outline properties out of which 3 individual outline properties which are important as shown below-

1)CSS-outline:width–This is the width of the outline.

2)CSS-Outline:style–It defines the style and looks of the outline.

3)CSS-Outline:color–This represents the Color of the outline.

The last individual outline property which is least important is –

4)CSS-Outline:Offset–This is the Offset or space between the outline and the border.

CSS Outline Width

The Outline Width uses the outline-width property to set the width of the line outside the border.

Syntax of Outline Width:
outline-width: value(length| thick|  medium| thin| initial| inherit| unset);

The Length can be valid CSS units like px, em, cm, mm, vw etc.

Outline Width

Example of Outline Width

<style> 
#outline_width {
  background-color:#ffff00;
  border: 4px solid RED;
  width:400px;
  height:130px;
  padding: 10px;
  outline-width:5px;
  outline-style:solid;
}
</style>
Run the Code

CSS Outline Style

The Outline Style uses outline-style property to set the style of the outline.

The important outline-styles are –

  • solid
  • dashed
  • dotted
  • double
  • ridged
  • groove
  • inset
  • outset
  • outline
  • hidden
  • none

The Syntax of Outline Style:
outline-style: solid| dashed| dotted| double| ridged| groove| inset| outset| outline| hidden| none;

Outline Style

Example of Outline Style

<style>

  .so {
      border:3px solid;
      outline-style: solid;
	  outline-width:2px;
}


  .ro {
      border:1em ridge brown;
      outline-style: ridge;
	  outline-width:1px;	  
}

  .dbo {
      border:2px double #dea807;
      outline-style: double;
	  outline-width:4px;	  
}

  .dso {
      border:5px dashed #00d73a;
      outline-style: dashed;
	  outline-width:3px;	  

}
</style>
Run the Code

CSS Outline Color

The Outline Color uses the outline-color property to set the color of the outline. The color can be set using any valid color values like –
  • Color Names like Red, Blue, Green
  • Hex Color Codes like #ff00ff
  • rgb value like rgb(0,245,200)
  • rgba value like rgba(20,89,45)
  • hsl value like hsl(120,30%,50%)
  • hsla value like hsla(0,50%,70%,0.5)

Syntax of Outline color:
outline-color: color-name| hex-color-code| rgb(r,g,b)| rgba(r,g,b,a)| hsl(h,s,l)| hsla(h,s,l,a);

Example of Outline color

<style>

  .outline_color1 {
      border:2px dotted green;
	  outline-style:solid;
      outline-color: yellow;
	  outline-width:1.5px;
}


  .outline_color2 {
      border:0.2em solid red;
	  outline-style:dotted;
      outline-color: #0bdec5;
	  outline-width:3px;	  
}

  .outline_color3 {
      border:3px double #dea807;
	  outline-style:groove;
      outline-color: hsl(120,50%,50%);
	  outline-width:6px;	  
}

  .outline_color4 {
      border:5px dashed #00d73a;
	  outline-style:ridge;
      outline-color: rgba(145, 154, 255, 1);
	  outline-width:4px;	  

}
</style>
Run the Code

CSS Outline Offset

The outline-offset property sets a transparent space between the outline and the border of the element.

CSS Outline offset

The Syntax of Outline offset:
outline-offset: units;

Example of Outline Offset

<style>
.no_outline_offset {
    border:2px solid #00ffff;
	outline-style:solid;
	outline-width:2px;

}

.outline_offset {
    border:2px solid #00ffff;
	outline-style:solid;
	outline-width:2px;
	outline-offset:10px;	

}
</style>
Run the Code

2. CSS Shorthand Outline properties

The shorthand outline properties are the preferred CSS Outline property where you can define the Outline width, Outline Style & Outline Color directly using the outline property.

The outline is the shorthand for outline-width, outline-style & outline-color.

Syntax of CSS Outline( shorthand):
outline: outline–width, outline-style, outline-color

Example to use shorthand Outline property

<style>
.outline_val12 {
   border:2px dotted green;
   outline: 3px solid aqua;
}


.outline_val22 {
      border:0.2em solid red;
      outline: solid #0bdec5;	  
}

  .outline_val32 {
      border:3px double #dea807;
      outline: groove;	  
}
</style>
Run the Code

CSS Interview Question and Answers

It defines the offset or space between the outside of the border.
The Syntax of Outline Style:

outline-offset: units;

CSS outline draws a line outside the border element.
We can define outline property in individual or using shorthand properties.
Example:

outline:2px solid blue;

We can set CSS outline using different properties like,

  • Outline: width – This is the width of the outline.
  • Outline: style – It defines the style and looks of the outline.
  • Outline: color – This represents the Color of the outline.
  • Outline: Offset – This is the Offset or space between the outline and the border.

CSS Borders
It gives a border around the element.

CSS Outline
It gives an outline around the borders.

For Example,

<!DOCTYPE html>
<html>
<head>
<style>
 .val1 {
width:300px;
height:200px;
text-align:center;
border:15px solid Navy;
outline:13px solid red;
}
</style>
</head>
<body>
 
<h4 class="val1">Border and Outline property</h4>
 
</body>
</html>
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!