Welcome to another CSS article! In this article, I will be talking about CSS border and outline property, their differences and a bonus section- how to animate CSS outlines, which you can add to your projects.

The first time I heard of the CSS outline property was from a tutorial. I found it cool and amazing but the confusion came when I realized they have similar syntaxes.

They have the same syntaxes but they are not the same thing and I will carefully differentiate them to avoid confusion.

CSS BORDER:

The CSS Border is part of the CSS Box Model: Content, padding, Border and Margin.

images-box model.png The box model is used when talking about design and layout. The content is for images and texts. Padding- Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content. Margin - Clears an area outside the border. The margin is transparent.

CSS OUTLINE:

This comes after the border and it is not part of the box model. This is where the major difference lies. The CSS Border affects layout while CSS Outline has no effect on the layout. For example, the CSS Box-shadow property has no effect on the layout when applied on a website which can be likened to the Outline property.

difference btw o & B.png Now that difference has been pointed out, I will move to advantages and disadvantages.

Differences:

the CSS border can be styled separately as in: border-left, border- right e.t.c while the CSS outline property cannot be styled separately.
the border radius works with it unlike the CSS outline property that border radius does not work on.
the CSS border has an effect on layout while the CSS outline property does not.
CSS outline property has outline-offset which can do cool things which makes up for the border radius that it cannot do.

Now to the fun part! Gif description