Pseudo white border on buttons

Pseudo white border on buttons

Here's how we fix a common issue with buttons in Internet Explorer...

As usual, Internet Explorer complicates things again by adding a 1px border inside styled buttons with a background image. This obviously looks odd! Here’s how we fix it.

The 1px border is a slither of the element’s background colour showing through. To fix this, set the background colour to the border colour¬†or content’s colour.

For example:

.button { 
  background: #b0c8e7 url('btn.png') repeat-x; 
  border-color: #b0c8e7; 
}
Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
13th September, 2011

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all