The outline-style property in CSS is used to set the appearance of the outline of an element. The outline and border of an element are similar, but not the same. The outline does not take space and it is drawn outside the border of an element. Also, the outline is drawn around all the four sides of the element by default, and there is no way to alter this.
Syntax:
outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;
Property Values:
- auto: It sets the outline of an elements through the browser.
Syntax:
outline-style: auto;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: auto;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- none: It is the default value and it sets the outline width to zero. Hence, it is not visible.
Syntax:
outline-style: none;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: none;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- dotted: It is used to set a series of dots around the element as outline.
Syntax:
outline-style: dotted;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: dotted;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- dashed: It is used to set a series of dashed line segment around the element as outline.
Syntax:
outline-style: dashed;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: dashed;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- solid: It is used to set solid line segment around the element as outline.
Syntax:
outline-style: solid;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style property</title>
<style>
h1{
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: solid;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- double: It sets a doubled line segments around the element as outline. The width of the outline is equal to the sum of width of the individual line segments and space between them.
Syntax:
outline-style: double;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS outline-style property</title>
<style>
h1{
color: green;
text-align: center;
/* CSS Property for outline-style */
outline-style: double;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- groove: It sets grooved line segments around the element as the outline, which makes feel that it is carved.
Syntax:
outline-style: groove;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
outline-width: 8px;
/* CSS Property for outline-style */
outline-style: groove;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- ridge: It sets ridged line segments around the element as outline, which makes feel that it is extruding. It is opposite to that of a groove.
Syntax:
outline-style: ridge;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
outline-width: 8px;
/* CSS Property for outline-style */
outline-style: ridge;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- inset: It sets embedded line segments around the element as the outline, which makes us feel that it is fixed in the display.
Syntax:
outline-style: inset;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
outline-width: 8px;
/* CSS Property for outline-style */
outline-style: inset;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- outset: It sets line segments around the element which appears to be coming out, as outline. It is opposite of inset.
Syntax:
outline-style: outset;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
outline-width: 8px;
/* CSS Property for outline-style */
outline-style: outset;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- initial: It is used to set outline-style property to its default value. It sets the width of the outline to zero. Hence, the outline is not visible.
Syntax:
outline-style: initial;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-color: black;
/* CSS Property for outline-style */
outline-style: initial;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
- inherit: It makes the outline-style property to be inherited from its parent element.
Syntax:
outline-style: inherit;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS outline-style property
</title>
<style>
* {
padding: 1px;
}
body {
outline-style: dashed;
}
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-color: black;
/* CSS Property for outline-style */
outline-style: inherit;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by outline-style property are listed below:
- Google Chrome 1.0
- Edge 12
- Internet Explorer 8
- Firefox 1.5
- Opera 7.0
- Safari 1.2
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!