CSS Basics: The difference between outline and border

CSS outline and border are at a glance very similar but have a few important differences:

• Outline is effectively overlaid over the top of the element it is applied to and therefore outline does not add to the element width whereas border does add to the element width
• Outline (according to the official W3C specification at least) does not have to be rectangular whereas border must be rectangular
• Internet Explorer 7 and earlier support for outline is poor whereas border is pretty well supported

Both outline and border are CSS2 properties.