welcome to tutorialfamily

css outline

css outline property used for applying border to outside of element area.

Various type of outline given below.


css outline

  • outline-style – used for a set border style
  • outline-color – Used for a set border color
  • outline-width – Used for a set border width
  • outline-offset – Used for a put space between outline and border element
  • outline – Used for a single property

css outline


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
p{
   color: #000;  
   border: 4px dotted #000;
   margin: 5px;
   padding: 10px;
}
p.one{
   outline-style: solid;
   outline-width: 10px;
   outline-color: #ff0000;
}
p.two{
   outline-style: dotted;
   outline-width: 10px;
   outline-color: #f12a43;
}
p.three{
   outline-style: dashed;
   outline-width: 10px;
   outline-color: #ff0000;
}
p.four{
   outline-style: double;
   outline-width: 10px;
   outline-color: #ff0000;
}
p.five{
   outline-style: groove;
   outline-width: 10px;
   outline-color: #ff0000;
}
p.six{
   outline: 10px solid #ff0000;
}
</style>
</head>
<body>
   <p class="one">my car</p>
   <p class="two">my car</p>
   <p class="three">my car</p>
   <p class="four">my car</p>
   <p class="five">my car</p>
   <p class="six">my car</p>
</body>
</html>


Run

Our Content