Как сделать чтобы фон не просвечивал полупрозрачный бордер?

kidar2 · November 10, 2011

subj.

Вёрстка очень простая,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#test

{

background-color: red;

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c000000', endColorstr='#4c000000');

border: 20px solid rgba(0, 0, 0, 0.2);

}

</style>

</head>

<body>

DIV

</div>

</body>

</html>

вот так она рисуется:

Собственно вопрос в том, как сделать чтобы фон не просвечивал границы элемента?

Softlink · November 10, 2011

Как вариант background-clip

Еще можно попробовать сделать фон картинкой и сместить его через background-position

kidar2 · November 10, 2011

Спасибо, а для IE7-8 есть решение?

Justnewone · November 10, 2011

С фоном-картинкой очень кроссбраузерное решение. Если хочется все-таки без картинок, оберните элементом и перенесите бордер на него.

Question