CSS Outset/Inset, border and outline

Question

What is exact difference between CSS outset,inset,border and outline.
Really confused about this , and what properties can be applied together.?
Which browsers support which of the above properties ?
Short example on above properties will be good.

Thanks

Answer 1

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