19/09/2025, 23:24 CSS Outline - GeeksforGeeks
Search... Sign In
Full Stack Course HTML CSS JavaScript TypeScript jQuery AngularJS ReactJS Next.js
CSS Outline
Last Updated : 11 Jul, 2025
CSS outline is a property used to draw a line around an element's
border. It does not affect the layout, unlike borders. It's often used to
highlight elements, providing a visual emphasis without altering the
dimensions of the element.
Syntax
selector{
outline: outline-width outline-type outline-color;
/*outline: 2px solid grey;*/
}
Example: This example uses the outline property to create a dashed
blue outline.
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
outline: 2px dashed blue;
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p class="dotted">
A Computer Science portal for geeks.
https://www.geeksforgeeks.org/css/css-outline/ 1/6
19/09/2025, 23:24 CSS Outline - GeeksforGeeks
</p>
</body>
</html>
Output:
CSS Outline Example output
CSS outline properties can be categorized into 4 types, namely, Outline-
style, Outline-color, Outline-width & Outline-offset. We will discuss all
the types of outline properties sequentially through the examples.
CSS Outline Properties
There are lots of properties comes under the CSS outline collection all of
them are well described with the example.
Table of Content
Outline-style
Outline-color
Outline-width
Outline-offset
Outline-style
The outline-style property sets the appearance of the outline of an
element. Any other outline property cannot be accessed without setting
the outline-style. If absent, the default style will be set to none.
Syntax
outline-style:
auto|none|dotted|dashed|solid|double|groove|ridge|inset|outs
et|initial|inherit;
Outline-color
https://www.geeksforgeeks.org/css/css-outline/ 2/6
19/09/2025, 23:24 CSS Outline - GeeksforGeeks
The outline-color property sets the color of an element's outline. The
color can be set by its name, an RGB value, or a hex value. If absent, the
default color will be the current color of the element.
Syntax
outline-color: <color> | invert | inherit;
Example: This example illustrates the Outline property where the color
is set to the specific color value and outline style is solid.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: solid orange 4px;
outline-style: solid;
outline-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for geeks.</p>
</body>
</html>
Output:
Outline-width
Outline-width is used to specify the width of this outline for a specific
element. The width of the outline can be set by specifying the size of the
width in px, cm, pt, etc, or by using terms like a thin, thick, medium. If
absent then the default width will be the medium.
Syntax:
https://www.geeksforgeeks.org/css/css-outline/ 3/6
19/09/2025, 23:24 CSS Outline - GeeksforGeeks
outline-width: medium|thin|thick|length|initial|inherit;
Outline-offset
Outline-offset Property sets the amount of space between an outline
and the edge or border of an element. An outline is a line drawn around
elements outside the border edge. The space between the element and
its outline is transparent. Also, the outline may be non-rectangular. The
default value is 0.
Syntax:
outline-offset: length|initial|inherit;
Example: This example illustrates the Outline property where the
offset is set to 3 px and width as 5px..
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: solid green 3px;
outline-style: solid;
outline-width: 5px;
outline-offset: 3px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for geeks.</p>
</body>
</html>
Output:
https://www.geeksforgeeks.org/css/css-outline/ 4/6
19/09/2025, 23:24 CSS Outline - GeeksforGeeks
CSS Outline offset and width example
Supported Browsers
The browser supported by CSS Grid Layout Module are listed below.
Google Chrome 57.0
Microsoft Edge 16.0
Mozila Firefox 52.0
Safari 10.1
Opera 44.0
Comment More info
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305)
Registered Address:
K 061, Tower K, Gulshan Vivante
Apartment, Sector 137, Noida, Gautam
Buddh Nagar, Uttar Pradesh, 201305
https://www.geeksforgeeks.org/css/css-outline/ 5/6
19/09/2025, 23:24 CSS Outline - GeeksforGeeks
Company Explore
About Us POTD
Legal Job-A-Thon
Privacy Policy Connect
Careers Community
Contact Us Blogs
Corporate Solution Nation Skill Up
Campus Training Program
Tutorials Courses
Programming Languages IBM Certification
DSA DSA and Placements
Web Technology Web Development
AI, ML & Data Science Data Science
DevOps Programming Languages
CS Core Subjects DevOps & Cloud
Interview Preparation GATE
GATE Trending Technologies
School Subjects
Software and Tools
Offline Centers Preparation Corner
Noida Aptitude
Bengaluru Puzzles
Pune GfG 160
Hyderabad DSA 360
Patna System Design
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
https://www.geeksforgeeks.org/css/css-outline/ 6/6
