CSS outline

Working with Outline

In this lesson, we will learn how to apply outline to an HTML element using CSS outline properties.

CSS outline Property

CSS outline property is used to draw a line around elements, providing visual emphasis or indicating focus. They provide a clear indication of the currently focused element, improving navigation for users who rely on keyboard or screen readers.

It is a short hand property that can be used to set the style, width and color of an outline.

Let's create a text box and button with a red outline to highlight it when clicked:

Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS outline Example</title>

    <!-- Internal CSS -->
    <style>
        #btn1:focus {
            outline: 1px solid red;
        }

        #txt1:focus {
            outline: 1px solid red;
        }
    </style>
</head>

<body>
	<input type="text" id="txt1" placeholder="Email">
    <input type="button" id="btn1" value="Click Me">
</body>

</html>

In the above example, the width of the outline is 1px, the style of the outline is solid and the color of the outline is red.

The :focus is a pseudo code that means the CSS rules written for "#txt1" will only work when you click on the element which is associated with id="txt1". We will learn more about the pseudo codes in the subsequent lesson.

We can also set outline's width, style and color separately using the CSS property outline-width, outline-style and outline-color.

Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS outline Example</title>

    <!-- Internal CSS -->
    <style>
        #btn1:focus {
            outline-width: 2px;
            outline-style: solid;
            outline-color: green;
        }

        #txt1:focus {
            outline-width: 2px;
            outline-style: solid;
            outline-color: red;
        }
    </style>
</head>

<body>
	<input type="text" id="txt1" placeholder="Email">
    <input type="button" id="btn1" value="Click Me">
</body>

</html>

CSS Outline Styles

There are eight types of outline styles available in CSS and they are:

dotted
dashed
solid
double
groove
ridge
inset
outset

Example dotted dashed solid double groove ridge inset outset

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS outline style Example</title>

    <!-- Internal CSS -->
    <style>
        #txt1:focus {
            outline: 2px dotted red;
        }
    </style>
</head>

<body>
    <input type="text" id="txt1" placeholder="Email">
</body>

</html>

Previous Next

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px dotted red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px dashed red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px solid red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px double red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px groove red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px ridge red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px inset red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS outline style Example</title>  <style> #txt1:focus { outline: 2px outset red; } </style> </head> <body> <input type="text" id="txt1" placeholder="Email"> </body> </html>

CSS outline

CSS outline Property

CSS Outline Styles

Our Courses

News Updates