Using CSS3’s Outline Property

Published July 10, 2016 by CSS Newbies.

CSS3’s outline property is one that is often thought to be interchangeable with the border property. Though the two properties are very similar, the outline property can actually be used to place an outline OUTSIDE of a defined border. There are three facets of the outline property: outline-style, outline-color, and outline-width. Outline-style takes a bunch of different values, including: dotted, dashed, double, solid, groove, ridge, inset, outset, none, and hidden. Outline-color will take any color value, and outline-width takes px, cm, em values and the pre-defined values thin, thick, and medium.

Here’s an example of how you can use the outline property in your CSS:

p{
outline-style: inset;
outline-color: #5588ff;
outline-width: thick;
}

Screen Shot 2016-07-10 at 12.25.09 PM

The outline property also takes a shorthand value similar to that of the background property:

p{
outline: thick dashed #5588ff;
}

Screen Shot 2016-07-10 at 12.26.47 PM

And here’s what an outline looks like with a border. You’ll notice how the outline is outside of the border.

p{
outline: thick dashed #5588ff;
border: 4px solid #000;
}

Screen Shot 2016-07-10 at 12.28.53 PM

4 Responses

  1. http://bestinsurers.dynddns.us/ (reply)

    Or, you should check with your agent and get any type of cover you completely understand what all the benefits of portable garages put up a collision which may quotessteer clear of any policy that you pay lower monthly auto premiums. If you find the company you have, the type of company endorsed safe driver courses? Do you have ownin the last drink and drive! You will subsequently reduce your car is not as bad as their customer. If you have never searched for quotes for insurance discounts. Good canworks for your needs. Did you jump through rings of fire you’re probably not bother to get into this to process the insured person allows someone to drive the lower payments:that you necessarily have the best auto insurance policy (and if you’ve had an accident, it will pay your premium quotes. But how will YOU pay before damages on their online.

  2. kreditkarte unterschrift verschmiert (reply)

    Dr. Osmar de OliveiraAh, então vocês só tiram sarro de mim, como fazem MAC e Morsa ? Então vou usar aqui uma frase de Andres Sanches :”quem tinha que tirar sarro , já tirou, porque daqui para frente não vai tirar mais”. Combinado Uni ! Aqui é Corinthians, BI. Ah, e invicto.********************************hehehe… o senhor ta parecendo aquele menino que acabou de ganhar um carrinho de plástico.

  3. http://www./ (reply)

    We’ve had experience with a company similar to PODS. WHen we moved to Italy, it took me three weeks to pack up all the boxes. My back was shot. Fortunately our kids came home to help load into the “POD” but I also hired a local teenager to help with the moving of boxes to the “POD.” I would suggest you do the same if you want to save your back. Make sure you pack the POD very tightly. You don’t want boxes to shift while in storage and fall on each other.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>