Как бы было замечательно, если бы можно было написать class="round"; и углы волшебно закруглялись.

У нас на hh.ru так и сделано: у блока с классом b-round круглые углы получаются благодаря -moz-border-radius и -webkit-border-radius для Firefox, Chrome и Safari, SVG для Opera и с помощью expression для IE 6 и 7 версий.

И все бы хорошо, не выпусти Microsoft броузер IE 8, в котором не работают expression и не поддерживается CSS 3.
К счастью прилично поддерживается CSS 2.1, чем я и воспользовался при поисках метода создания круглых углов без использования дополнительных элементов.

Пример работает в IE 8
Не забудьте отключить режим совместимости

Такие спрайты используются для отрисовки углов

А теперь CSS. Только для IE 8!

1. .b-round-example {
   Тут все просто =) Левый нижний угол в background блока. position: relative обязателен для работы нижнего правого угла.
2. margin: 1em 0 2em;
3. width: 60%;
4. padding: 40px 0;
5. color: #FFF;
6. text-align: center;
7. background-color: #7DA7D9;
8. background-image: url("round-tl-bl.png");
9. background-position: -15px bottom;
10. background-repeat: no-repeat;
11. position: relative;
12. }
13. .b-round-example:before {
    Перед основным контентом блока пишем любое слово. Пустое свойство content не подходит, потому что в дальнейшем будем использовать его :first-letter. Какого либо текста все равно не увидим, он спрятан font-siz’ом. Ну а отрицательный margin-top нужен, чтобы перекрыть padding-top родительского блока. position: absolute использовать к сожалению нельзя — блок выпадет из потока и :first-letter перейдет на основной контент.
    Это будет верхний правый угол.
14. content: 'round';
15. position: relative;
16. top: 0;
17. margin: -20px 0 0;
18. display: block;
19. font-size: 0;
20. height: 15px;
21. background-image: url("round-tr-br.png");
22. background-position: right 0;
23. background-repeat: no-repeat;
24. }
25. .b-round-example:first-letter {
26. float: left;
27. font-size: 0;
28. padding: 0 15px 15px 0;
29. background-image: url("round-tl-bl.png");
    :first-letter слова round для левого верхнего угла.
30. background-position: 0 0;
31. background-repeat: no-repeat;
32. }
33. .b-round-example:after {
34. content: ' ';
35. font-size: 0;
36. position: absolute;
    Правый нижний угол позиционирован абсолютно. content не должен быть пустым (у меня там пробел).
37. right: 0;
38. bottom: 0;
39. height: 15px;
40. width: 15px;
41. background-image: url("round-tr-br.png");
42. background-position: left bottom;
43. background-repeat: no-repeat;
44. }

Кстати этот код отлично работает в Опере, что при необходимости позволит отказаться от SVG.

Есть и ограничения, как без них...

• Нет возможности положить в блок background-image. Фон уже занят одним из углов
• Прозрачные углы возможны лишь для блока с заведомо известной высотой или шириной
• при наличии у блока padding-top: > 0, придется ставить верхние углы руками. А все из за того, что нельзя дать .block:before {position: absolute} =(

И на закуску баг:

Углы лежащие в background блока и в first-letter (верхний левый угол) должны быть в одном спрайте, иначе background блока отображаться не будет.