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.
| This entry was posted by Neil Craig on July 26, 2010 at 4:38 pm, and is filed under CSS, CSS Basics, General Web-Development. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No trackbacks yet.
When to use an img tag, when to use a CSS background image
about 2 years ago - 3 comments
<Img> tag vs CSS background image…This has caused much confusion to many web-developers I have met – many more developers don’t care. So, when should you use an <img> and when should you use a CSS background image on your element? The answer is surprisingly simple…In nearly all cases, use <img> tags for contextually important More >
How to reduce web page download time in 4 (fairly) simple steps
about 2 years ago - No comments
Web pages have generally become much more bulky in recent years. The trends for JavaScript-based functionality enhancements and the popularisation of digital photography have led to larger amounts of data being transferred (downloaded) per page and I can’t see a reversal of this happening any time soon. If you’re using a mobile device such as More >
Mootools element.morph() example
about 2 years ago - 3 comments
A simple example of the time-saving element.morph() Mootools method which allows you to morph HTML elements from one property set to another.
A simple example of CSS sprites
about 3 years ago - 7 comments
CSS Sprites can help to reduce web page download times and delays caused by downloading of hover/rollover background images. This article walks through the basics with an example of how you can use CSS sprites in a graphical HTML menu.
An example of @font-face web-fonts from CSS3
about 3 years ago - 2 comments
Web-fonts, for those who don’t know, are a method of using a custom font in your web page(s). Unlike the more traditional method of specifying the font using the CSS “font-family” (or the shorthand “font”) which relies on the user having the relevant font installed on their computer, web-fonts allow the developer to use fonts More >
My favourite FireFox extensions for web-developers
about 3 years ago - No comments
This is my personal collection of FireFox extensions that I just can’t live without whilst developing websites.
about 2 years ago
Amiable brief and this post helped me alot in my college assignement. Thanks you seeking your information.
about 2 years ago
Good post and this mail helped me alot in my college assignement. Thanks you as your information.
about 2 years ago
Great site. A lot of useful information here. I’m sending it to some friends!