×

Html & Html5

The World's best Software Development Study Portal

CSS Outline



Outline is that line which we use to draw outside of any elements or border. There are 5 main properties we are having here in outline and these are as follows:-


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


Outline-style



This allows you to select the style of outline which you want to display . Some of the values are as follows explained in the program :-



<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style="outline-style:dotted;"> dotted outline </p>

<p style="outline-style:dashed;"> dashed outline </p>

<p style="outline-style:solid;"> solid outline </p>

<p style="outline-style:double;"> double outline </p>

<p style="outline-style:groove;"> groove outline </p>

<p style="outline-style:ridge;"> ridge outline </p>

<p style="outline-style:inset;"> inset outline </p>

<p style="outline-style:outset;"> outset outline </p>

<p style="outline-style:none;"> none outline </p>

<p style="outline-style:hidden;"> hidden outline </p>

</body>

</html>


Output of the Program



dotted outline


dashed outline


solid outline


double outline


groove outline


ridge outline


inset outline


outset outline


none outline


hidden outline


Here in the above program dotted, dashes , solid , double, groove, ridge, inset, outset, none and hidden are the values.

Let's understand what these values are responsible for:-



Values Description
dotted Defines a dotted outline
dashed Defines a dashed outline
solid Defines a solid outline
double Defines a double outline
groove Defines a groove outline
ridge Defines a ridge outline
inset Defines a inset outline
outset Defines a outset outline
none Defines a none outline
hidden Defines a hidden outline


Outline-width



This allows you to adjust the width of outline which you want to display . We can set this width by using the following values:-

  • thin
  • thick
  • medium
  • length(in pt px cm etc.)



Before providing the outline-width property we must set the outline-style-property first.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

p{

      border:2px solid red;

      outline-style:solid;

      outline-width:5px;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the outline-width of 5px in the paragraph. And here we can also set the values to thin, thick, medium etc.




Outline-color



This allows you to change the color of the outline which you want to display . We can set this color by using the following values:-

  • color name
  • Hex values (#ff0000)
  • RGB values "rgb(255,0,0)"
  • transparent



Before providing the outline-color property we must set the outline-style-property first.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

      .red{

      border:3px solid yellow;

      outline-style:solid;

      outline-color:red;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the outline-color of red in the paragraph. And here we can also set the values to RGB, Hex values,transparent etc.





Outline



This allows you to change the style,width and color property of the outline in a single line which you want to display .

    Order of writing outline shorthand property
  1. outline-width
  2. outline-style(important)
  3. outline-color



And the same above order we have to follow if we want to use outline shorthand property, we can also omit the properties if we want but the order again will be same and the outline-style property is very must.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

p{

      border:2px solid yellow;

      outline: 5px solid red;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the outline-size, outline-style and outline-color by specifying these properties in single line.




Outline-offset



This allows you to add spaces between your outline and border or edge of the element.

Let's understand this by the following program



<!DOCTYPE html>

<html>

<head>

<style>

p{

      border:2px solid yellow;

      outline: 5px solid red;

      outline-offset:10px;

}

</style>

</head>

<body>

<p> I am Manish </p>

<p class="red"> Hey I love India </p>

</body>

</html>


Output of the Program



I am Manish

Hey I love India


So we get the spaces between the border and the outline.







CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute