Differencebetween Outline and Border CSS Properties

What is the difference between outline and border CSS properties?

From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:

1.Outlines do not take up space.

2.Outlines may be non-rectangular.

Difference between outline and border properties

Your assumption is incorrect. Both properties' shorthands except values to be in the order width, style, and color.

See

• http://www.w3.org/wiki/CSS/Properties/border
• http://www.w3.org/wiki/CSS/Properties/outline

You can probably mix them as you wish and it'll still work, but that is the browser being lenient.

What is the difference between CSS margin and outline?

outline only makes a line around any element to make it look different from the other elements.it will not give any space.whereas margin will give space around any element.

as in the above example u can see how left margin works.

outline: none VS outline: 0

According to MDN:

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration

So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color)

I used Firefox Developer Tools to find out the difference:

As you can see, they both use the default text color as the outline-color, and they both have outline-style set to none. The only difference is the outline-width:

• When the outline is 0, the outline-width is 0px
• When the outline is none, the outline-width is medium

That is the only difference between the two. You can use either one, they will both display the same way (since the outline-style is none, it does not matter how wide the outline is).

CSS Outset/Inset, border and outline

Border and outline differences

Border: The border edge surrounds the box border. Its area counts the total size of the box model. You can specify size (border-width), color (border-color) and style (border-style) for each of the four possible borders (top, right, bottom and left). You can retrieve more info about border properties here.

Outline: Similar to border, but in this case do not take up space, opposite to border. Also, you can't style each border separately, the outline style applies to all the four sides of the box. Outline can be used together with border. Properties you can apply to outline are outline-color, outline-style and outline-width You can get more info about outline properties here.

Here's a box model representing outline and border

Border-styles: inset and outset

Inset: It's a border-style. The border makes the box look as if it was embedded in the canvas. You can use this border-style within border-color and border-width.

Outset: Another border-style. The opposite of 'inset': The border makes the box look as if is coming out of the canvas. You can use this border-style within border-color and border-width.

Documentation and sources

• How Do Browsers Render the Different CSS Border Style Values?
• W3C Box model specification
• W3C Border specification
• W3C Outline specification

outline on only one border

Outline indeed does apply to the whole element.

Now that I see your image, here's how to achieve it.

.element {  padding: 5px 0;  background: #CCC;}.element:before {  content: "\a0";  display: block;  padding: 2px 0;  line-height: 1px;  border-top: 1px dashed #000; }.element p {  padding: 0 10px;}

<div class="element">  <p>Some content comes here...</p></div>

.standard-content-module {
      width: 414px;
      overflow:visible;
  }

<div></div>
test

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}