Home » CSS

Outlining the content in CSS

CSS Outlining: Here, we are going to learn about the outlining in CSS, how to outline the content in CSS?
Submitted by Anjali Singh, on November 04, 2019

CSS Outlining

Outline is a line that goes around the element, outside of the border.

In contrast to border, outlines do not take any space in the box model. Adding an outline to an element does not affect the position of that element or other elements.

The essential properties of outline are outline-color, outline-style and outline-width.

Syntax:

    Element{
        Outline:outline-color outline-style outline-width;
    }

Some common outline properties and their values,

Parameter Details
dotteddotted outline
dashed dashed outline
solid solid outline
doubledouble outline
groove grooved outline, it depends on the outline-color value
ridge ridged outline, it depends on the outline-color value
inset inset outline, it depends on the outline-color value
outset outset outline, it depends on the outline-color value
none no outline
hiddenhidden outline

Outlining the content in CSS

Outline style

The outline-style property is used to set the style of the outline of an element.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p.p1 {
            border: 1px solid black;
            outline-color: red;
            outline-style: dotted;
        }
        
        p.p2 {
            border: 1px solid black;
            outline-style: dashed;
            outline-color: red;
        }
        
        p.p3 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
        }
    </style>
</head>

<body>
    <p class="p1">A dotted red outline</p>
    <p class="p2">A dashed red outline</p>
    <p class="p3">A solid red outline</p>
</body>

</html>

Output

Outlining the content in CSS | Example 2

The above code would outline the content inside the p tag according to the outline-style applied to it.

Outline-width

In CSS The outline-width property is used to specify the width of the outline, and can have one of the following values:

  • thin (typically 1px)
  • medium (typically 3px)
  • thick (typically 5px)
  • A specific size (pt, px, em, cm)

Example:

<!DOCTYPE html>

<head>
    <style>
        .p1 {
            border: 4px solid blue;
            outline-style: solid;
            outline-color: red;
            outline-width: thin;
        }
    </style>
</head>
<html>

<body>
    <p class="p1">
        Some content
    </p>
</body>

</html>

Output

Outlining the content in CSS | Example 3

The above code would apply solid outline with thin width around the output.

Outline-color

The CSS outline-color property sets the color of the outline. The color can be set by any type (RGB, HEX, NAME).

Example:

<!DOCTYPE html>

<head>
    <style>
        .p1 {
            border: 2px solid blue;
            outline-style: solid;
            outline-color: red;
        }
    </style>
</head>
<html>

<body>
    <p class="p1">
        Some content
    </p>
</body>

</html>

Output

Outlining the content in CSS | Example 4

The above code would apply solid outline, thin width with color red around the output.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.