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 enter image description here

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.

Inset border different browsers

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.

Outset border different browsers

Documentation and sources

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

Tags:

Html

Css

Jquery

Recent Posts