CSS outline

CSS outline is a property used to draw a line around an element, located outside the edge of the border, which can play a role in highlighting the element. The style, color, and width of the outline can be specified through the CSS outline attribute. The outline is a line drawn around the element, located outside the edge of the border, which can highlight the element.

Contour example

1. Draw lines around elements

Outline is a property in CSS that draws a line around an element. This line is outside the element's border and can highlight the element.

Here is a simple example of a CSS outline:

<!DOCTYPE html>
<html>
<head>
<style>
div {
      
      
  width: 200px;
  height: 200px;
  background-color: red;
  outline: 5px solid green;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

In the above code, divthe element has a 200px width and height, a red background, and a 5px wide, green outline. This outline will highlight divthe element, making it more visible on the page. The position of the outline depends entirely on the position of the border, that is, if the border changes, the outline will change accordingly.

2. Set the outline style

The style, width, and color of the outline can be set through the CSS outline property. Here is an example:

div {
    
    
  outline-style: solid;
  outline-width: 5px;
  outline-color: green;
}

In this example, divthe element's outline style is set to solid, the outline width is 5px, and the outline color is green. You can solidreplace it with another outline style such as dottedor dashed. You can also define the color of the outline using specific color values.

3. Set the color of the outline

The color of the outline can be set via the CSS outline-color property. Here is an example:

div {
    
    
  outline-color: green;
}

In this example, divthe element's outline color is set to green. You can define the color of the outline using specific color values, such as: red, #333, rgb(255,0,0)etc.

4. Set the width of the outline

The width of the outline can be set via the CSS outline-width property. Here is an example:

div {
    
    
  outline-width: 5px;
}

In this example, divthe element's outline width is set to 5 pixels. You can define the width of the outline using specific pixel values, percentage values, or keywords such as thin, mediumor .thick

CSS outline properties

Attributes	illustrate	possible values
outline-color	Set the color of the outline	Color name (such as red), hexadecimal color code (such as #FF0000), rgb value (such as rgb(255,0,0)) or rgba value (such as rgba(255,0,0,0.5))
outline-style	Set the style of the outline	solid, dotted, dashed, double, groove, ridge, inset, outset, or none contour)
outline-width	Set the width of the outline	Pixel value, percentage value or keywords such as thin, medium, thick etc.
outline-offset	Sets the distance between the outline and the element's border	Pixel value or percentage of positive values
outline	Set all outline properties in one statement	For example, outline: 2px solid red; means that the outline width is 2 pixels, solid line style, and red.

CSS Outline: OutLine

Article directory