CSS Outline



The CSS outlines are very similer to borders.

Difference between Border and Outline

  • css outline does not take up space.
  • css Outlines do not have to be rectangular.
  • css Outline is always the same on all sides.

There are four major CSS outline properties are here

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

CSS outline

CSS outline is a line that is shown just outside the border edge of the elements

Example

<html>
    <head>
    </head>
    
    <body>
       <p style ="outline:thin solid purple;">
          This text is having thin solid purple outline.
       </p>
       <br />
       
       <p style ="outline:thick dashed #993695;">
          This text is having thick dashed purple outline.
       </p>
       <br />
       
       <p style ="outline:5px dotted rgb(206,33,232);">
          This text is having 5x dotted purple outline.
       </p>
    
    </body>
 </html>
 


Click on the "Run This Code" button to see how it works.

CSS outline-color

The outline-color property is used to specify the color of the outline.

Example

<!DOCTYPE html>
<html>
<head>

<style>      
    p {
        outline-style: solid;
        outline-color: red;
    }
</style>
</head>
<body>
    <p> Internet Explorer 7 and earlier versions don't support the outline property. IE8 supports the outline properties only if a <code>&lt;!DOCTYPE&gt;</code> is specified.</p>
</body>
</html> 


Click on the "Run This Code" button to see how it works.

CSS Outline-style

The css outline-style property is used to specify the style for the line.

Example

<!DOCTYPE html>
    <html>
    <head>
    
        <style>      
            p {
                outline-style: solid ;
                outline-width: 5px;
              
            }
        </style>
    </head>
    <body>
        <p> Internet Explorer 7 and earlier versions don't support the outline property. IE8 supports the outline properties only if a <code>&lt;!DOCTYPE&gt;</code> is specified.</p>
    </body>
    </html> 
    


Click on the "Run This Code" button to see how it works.

CSS outline-width

The CSS outline-width property is used specify the width of the outline.

Example

<!DOCTYPE html>
    <html>
    <head>
    
    <style>      
        p {
            outline-style: solid;
            outline-width: thick;
        }
    </style>
    </head>
    <body>
        <p> Internet Explorer 7 and earlier versions don't support the outline property. </p>
    </body>
    </html> 
    


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units