CSS Outline

❮ Prev Next ❯

CSS outline is a property that allows you to add a visible border around an element without affecting its size or position in the layout. Outlines are commonly used to highlight elements, provide visual focus, or indicate interactive elements like links and buttons.

In this tutorial, we'll delve into the essentials of CSS outline to help you understand its usage and benefits

Understanding CSS Outline

The outlineproperty is similar to border, but it does not affect the layout of the element or its surrounding content. It adds a non-rectangular border around an element, typically drawn outside the border edge, and does not change the dimensions of the element.

Applying Outline Styles

You can apply outline styles using the outlineproperty in CSS. The outlineproperty accepts values for width, style, and color, similar to the borderproperty.

Example: 

.box-one {
  outline :2px solid red;/* Apply a solid red outline with 2px width */
}

Outline Styles

The outline property allows you to specify various outline styles, including solid, dotted, dashed,double,and more. You can also customize the width and color of the outline to achieve the desired visual effect.

Example: 

.box-one {
  outline :3px dotted blue;/* Apply a solid blue outline with 2px width */
}

Focus and Accessibility

One common use of outlines is to indicate focus on interactive elements like links and form fields.

By default, browsers apply an outline to focused elements for accessibility purposes, ensuring that users can navigate through the content using the keyboard.

Removing or Modifying Outlines

You can modify or remove outlines using CSS to customize the appearance of focused elements.

However, it's essential to ensure that any modifications still maintain accessibility and usability for all users, including those with disabilities.

Example: 

<label for="name">Name:</label>
<input type="text" id="name" name="name">

input:focus {
  outline :none;/* Remove the outline on focus for this element */
}

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
        input:focus{
          outline :none;
        } 
        .box{
          outline :3px dotted blue;
        } 
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
    <h3>welcome to Coding Koleji </h3>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <p class="box">this is outline</p>
  </body>
</html>

CSS outline is a versatile property for adding visible borders around elements without affecting their layout. By understanding how to apply outline styles and leverage them for focus indication and visual emphasis, you can enhance the accessibility and user experience of your web pages. Experiment with different outline styles and techniques to achieve the desired visual effects while maintaining usability and accessibility standards.

❮ Prev Next ❯