CSS Outset/Inset、边框和轮廓

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

Answer 2

these are a property of border

inset: Defines a 3D inset border. The effect depends on the border-color value outset: Defines a 3D outset border. The effect depends on the border-color value outline: Set the outline around an element

Answer 3

First answer is great answer. wish we found this two months ago while starting out with html-dom..

Would just like to add: here the big difference is, border does not have an offset property (a "padding" of a "border" that does not affect the placement of elements) and outline cannot be made round with the -radius property.