Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

CSS Outline


CSS Outline:-


code family

An outline is a line that is drawn around elements and out side the element, outside the borders, to make the element "stand out". this is CSS the outline properties:

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

    • Outline Style in CSS:-

    code family

    code family

    code family

    code family

    code family

    code family

    code family

    code family


    <!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">code family</p>
<p class="dashed">code family</p>
<p class="solid">code family</p>
<p class="double">code family</p>
<p class="groove">code family</p>
<p class="ridge">code family</p>
<p class="inset">code family</p>
<p class="outset">code family</p>

</body>
</html>

    Outline Color in CSS:-

    The outline color property is using to set the color of the outline of the element. 

    <!DOCTYPE html>
<html>
<head>
<style>
p.code1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}

p.code2 {
  border: 1px solid black;
  outline-style: double;
  outline-color: green;
}

p.code3 {
  border: 1px solid black;
  outline-style: outset;
  outline-color: yellow;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p class="code1">code family</p>
<p class="code2">code family</p>
<p class="code3">code family</p>

</body>
</html>

    Outline - Shorthand property in CSS:-



  • outline-width
  • outline-style (required)
  • outline-color


    • <!DOCTYPE html>
<html>
<head>
<style>
p.code1 {outline: dashed;}
p.code2 {outline: dotted red;}
p.code3 {outline: 5px solid yellow;}
p.code4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p class="code1">code family</p>
<p class="code2">code family</p>
<p class="code3">code family</p>
<p class="code4">code family</p>

</body>
</html>

    CSS Outline Offset

    The outline-offset property add space between the outline and the edge and border of an elements. 

    <!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  background:yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>we are code family</h2>

<p>This is code family</p>

</body>
</html>


    More Topics