Как удалить белые пиксели по углам после border-radius ⇐ CSS

[Anonymous]

I've created a simple unordered list with rounded corners, when selecting a list item I want the background to become blue to show the active state. When I have no border-radius everything looks great.

However, when I use a border-radius of 4px to round all the edges, and select the last list item (#5) with the rounded corners on the bottom, the blue active state now shows small white pixels on the corners. I can't seem to figure out how to prevent this from happening. Thanks for any help. .

http://jsfiddle.net/8PN8Z/

Code snippet:

$(function() { $('a.tab-link').click(function() { $('a.tab-link').removeClass('active-tab') $(this).addClass('active-tab') }); }); .left-dash { background: #444; height: 500px; } .left-dash div { -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; } .left-dash div ul li:first-child, .left-dash div ul li:first-child a { -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .left-dash div ul li:last-child, .left-dash div ul li:last-child a { -webkit-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px; } .dash-stats-3 { width: 220px; margin-bottom: 17px; background: #9f9f9f; -webkit-background-clip: padding-box; /* for transparent border with solid bg - Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ border-radius: 0px; border: 1px solid rgba( 0, 0, 0, 0.15); box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15); -webkit-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15); -o-box-shadow: inset 0px 0px 2px 0px #FFFFFF, 0px 1px 3px 0px rgba(0, 0, 0, 0.15); font-family: 'Museo Sans W01 700' san-serif; font-size: 14px; color: #828282; text-shadow: 0px 1px 1px #FFFFFF; font-weight: normal !important; } .dash-stats-3 ul li a, .dash-stats-3 ul li:first-child { height: 41px; border-bottom: solid rgba( 0, 0, 0, 0.15) 1px; border-top: solid rgba(255, 255, 255, .65) 1px; } .left-dash div ul li:last-child, .left-dash div ul li:last-child a { border-bottom: none; } .dash-stats-3 ul li a { position: relative; line-height: 43px; display: block; } .dash-stats-3 ul li a.active-tab { z-index: 120; border-top: 1px solid #5b82a7; background: #4e81be; /* Old browsers */ }

• testing
• 1 test-1
• 2 test-2
• 4 test-4
• 5 test-5

Источник: https://stackoverflow.com/questions/149 ... der-radius