How to Install Operating System ??Complete Guide Installing The Operating System

How To Set Outline With CSS

This outline is actually almost the same as the border CSS, but there are some fundamental differences for the border. In this tutorial we will discuss How To Set Outline With CSS, here are the differences between borders and outlines.

  1. The outline does not take space so that there are no changes in the shape of other elements
  2. Cannot determine each side with a different style

Now that is the second most basic thing that distinguishes between outlines and borders because the outline itself is separate from elements not like borders that are still part of an element.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

Following are the outline properties that we will discuss in this tutorial to be able to make an outline.

  • outline-width is used to set the outline line size
  • outline-style is used to determine the outline line shape
  • outline-color is used to determine the color of the outline line
  • outline property short that can set the three properties above in a declaration

We will discuss the properties above in detail along with the source code that will simplify this tutorial.

How To Set Up An Outline With CSS

As in the initial explanation, the outline-width property is used to determine the outline, outline-style for line shapes, outline-color to determine the outline color, now from that property can be used to create an outline where the properties are combined together.

Like the border property, the outline has a style to determine the shape of the line you want to display, whether it is intermittent, dots, etc., here is a list of usable outline styles.

  • none there is no outline (same as outline-width: 0)
  • solid outline with one solid line
  • dotted outline with dots
  • dashed outline with intermittent short line style
  • double outline with two solid lines
  • groove outline with style like entering into the yard
  • ridge outline with style as it arises
  • inset outline with style like a security on the page
  • outline outset with style as out of page
  • hidden as none, does not appear on the page.

Here’s an example.

<style type = "text/css">
   .outline {
       outline-width: 3px;
       outline-style: solid;
       outline-color: black;
<p class = "outline"> This is the outline. </ p>

The results of the above code as below …

How To Set Outline With CSS
How To Set Outline With CSS

It can be seen that the outline can only surround the side of the HTML element, so we cannot determine which side parts need to be distinguished. Very different from the border, where we can determine each side is different from each other.

Using a Short Property Outline

This means that this short outline property is a property that can be used to shorten the three properties above. Here’s an example.

outline: 3px solid black;

By declaring like a property above it can speed up the writing of the CSS outline syntax, of course, where the syntax above actually is the same as the first syntax.

Before going forward, there are a number of articles that you might be looking for.

Read too :

User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *