CSS outline property

CSS Outlines

An outline is a line drawn around an element, located outside the edge of the border, which can highlight the element.

The outline attribute specifies the style, color and width of the outer border.

CSS outline (outline)

The outline (outline) is a line drawn around the element, located outside the edge of the border, which can highlight the element.

The CSS outline property specifies the style, color, and width of an element's outline.

All CSS outline properties

The number in the "CSS" column indicates which CSS version defines the property (CSS1 or CSS2).

Attribute	Description	Value	CSS
outline	Set all outer border properties in one statement	outline-color Outline-style outline-width inherit	2
outline-color	Set the color of the outer border	color-name hex-number rgb-number invert inherit	2
outline-style	Set the style of the outer border	none dotted dashed solid double Groove ridge inset Outset inherit	2
outline-width	Set the width of the outer border	thin medium thick length inherit	2

##For usage, please view our css reference manual

##Example

Draw a line around an element

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p
        {
            border:1px solid red;
            outline:green dotted thick;
        }
    </style>
</head>

<body>
<p><b>注意:</b> 如果只有一个!DOCTYPE指定IE8支持 outline属性。</p>
</body>
</html>

Run the program and try it

Example

Set the width of the outline

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        p.one
        {
            border:1px solid red;
            outline-style:solid;
            outline-width:thin;
        }
        p.two
        {
            border:1px solid red;
            outline-style:dotted;
            outline-width:5px;
            outline-color: #99fc58;
        }
    </style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>

</body>
</html>

Run the program and try it

Continuing Learning

CSS outline property

CSS Outlines

CSS outline (outline)

All CSS outline properties

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]