Learning How to Use CSS Outlines

In CSS outlines there are lines that are shown all around an element so that it would show and stand out. This line would show outside of the border part of the element. In order to change the different aspects of these lines, the outline properties in CSS are used.

Basics of CSS Outlines

The CSS outline can be used for specifying the following features of the outline to be used:

    • Style
    • Color
    • Width


You need to keep in mind that although the outline is something that goes to the element in order to make it appear more distinct, it is something different from the border. Unlike the border which will affect the total width and length of the element, the element will have no effect on that. This means you can set it on top of the space that you have allotted for the element.

The CSS Outline Properties

These are the properties used for setting the CSS outline:

      • CSS outline-color
      • CSS outline-style
      • CSS outline-width
      • CSS outline shorthand

CSS Outline-Color

This is the property that is used for setting the color to be used for the outline. This would come after only you have defined the outline style. You cannot set the outline color without having defined the style to be used. On the properties, there might be several values that would show. The color is the actual color of the outline. The value invert means the color of the outline is going to be inverted which would make the outline visible. This is the default setting. Inherit means that the color is going to be taken from the main element.

Here is a sample code for setting the outline-color:






This is the property that actually sets the outline. This would have to be set first before the other two properties are defined. There are many styles from you can take your pick. You can choose the outline to be dotted, dash or ridge. It gives just as many options when compared with that of the border. This property is supported in most of the major browsers in use today. Here is a sample code that sets the outline style:


CSS Outline Width

This property sets the total width which can be used on the outline. Like the outline color, the outline width should only be set after the style has been specified. If you don’t set the width of an outline, then it would revert back to the default value which is medium. Here is an example code that defines the outline width:







CSS Outline Shorthand

There is a much simpler way of setting the outline. This method is through the use of the CSS outline shorthand which defines all the three major elements of the outline at the same time. Instead of using three separate definitions, you can just state in one. Here is a good example of a code that uses outline shorthand:



outline:#00FF00 dotted thick;



TheCSS Box Model

Since in CSS, the elements used in making the page are known as boxes, a “CSS box model” is a term that you would often hear when it comes to designing and laying out a page. The actual box model is something that would show around the element. It would consist of different borders and margins and other elements of design that would be used for the element.

The Main Function of the Box Model

The main function of the box model is to help make the placement of the element on the page easier. This happens because you can use the box to see how close it is in relation with the other elements. It would also make it easier for you to figure out how big the element should be.

The Box Model Parts

The CSS box model is made up of several parts:

    • Margin- This is the clear space around the border. The margin is transparent and you would never see it with any color.
    • Border- This is a border that goes around the actual content and the padding. The choice of background color that you will use for the box would have some effect on the border.
    • Padding- This is the space that is clear surrounding the actual content or element. Like the border it is going to be affected by the color that you choose for the background.
    • Content-The content is the image, the text or sometimes both of those which would appear on the box.

Those are the different parts of the box model. You would need to have a good grasp of how the box works so you can start adjusting the height and width of the element in the right way.

When you make changes to the width and height properties, you are only making changes to the content area on the box model. But if you want to know the full size of the whole element, you would have to consider the size of the padding, border and even the margin as well.

In the code below, the total area is 400 pixels:



border:5px solid gray;


That means you have 350px for the width+ 20px for the left +for the right padding+ 10px for the left + right border+ 20px for the left + right margin which is equal to 400px.

The Total Width and Height

When you are calculating the total width of an element you need to consider the actual width of the content plus the padding on the two sides, the border on both sides and the margin on both sides. The height would be calculated in much the same way. You need the actual height of the content with the measurement of the top and the lower paddings, borders and margins.

Issues with Browser Compatibility

Like other issues with CSS, the biggest problem that you might encounter with box model is that you might encounter some differences with browsers. Internet Explorer for example might have some versions that have incorporated aspects of the box model in some properties.