Для семантической верстки лучше использовать JavaScript-решения, вроде NiftyCube -- делает то же самое, только не нужно вводить дополнительные элементы.

В очередной раз выражаю благодарность за полезную информацию...

Почему вы margin называете полями, а padding -- отступами.

По-моему, нужно наоборот.

Padding -- поля, margin -- отступ.

Dmytro Shteflyuk
Я хотел упомянуть о том, что можно использовать JavaScript и не нарушать семантику документа, но едва ли это может получить широкое распространение.

kost
margin - в переводе на русский "поле", а padding остается называть только "отступом".

Как раз под руку попалось. думал картинкой сделать, а теперь вот так вот попробую.

И всё в основном в CSS!
http://www.cssplay.co.uk/boxes/krazy.html

Оказывается очень распространенных метод, а я подсмотрел у Gmail`а чертежи велосипеда :)

Это такой же баянистый баян как и Nifty Corners.
BrokenBrake, с точки зрения семантики предложенный способ ни чем не хуже четырех вложенных друг в друга дивов с background-image.

Ну и ничего не мешает не городить это в коде, а написать простенький скриптик для автоматического добавления этих строк в нужное место.

2BrokenBrake
На css3 переходить рановато, очень хорошо сглаживает углы Safari 3 (да собственно у этого браузера все ОК с css3-зачот разработчикам!), что не скажешь даже о мозилле и его возможностях интерпритации стилей (-moz-border-radius как-то коряво отображется, нет сглаживания). Стоит ли делать круглые углы такм способом под два браузера?

А чем плохо использовать графику для создания закругленных или вообще любых уголков?

В самом начале статьи об этом написано.
Могу добавить, что многое зависит от того как это будет реализовано. Главное избегать тега img он не для декоративных изображений (тем не менее такие варианты периодически появляются, к примеру, Хабр), это очень плохо смотрится если в браузере отключена графика.

В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение

Тег b не устаревший. Он используется и будет использоваться в HTML5:

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

The b element should be used as a last resort when no other element is more appropriate. In particular, headers should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the m element.

В данном случае его присутствие абсолютно неуместно.

Если отключена графика, то неважно, каким образом вставлена картинка — тегом img, или background'ом к div'у — в любом случае её видно не будет…

Если углы закругляются background’ом то при отключении графики мы получим обычный блок с незакругленными углами, что вполне нормально, но если углы закругляются с помощью img то по углам блока мы увидим пустые квадратики под изображения, что гораздо хуже чем просто незакругленные углы.

За примером далеко ходить не будем:

Что скажете? Может обсудим технические стороны, а не отдалённые темы о вкусах?

<table>
    <tr>
        <td>

            <div id="rounded-box-5">

                <i class="r5"></i>
                <i class="r3"></i>
                <i class="r2"></i>
                <i class="r1"></i>
                <i class="r1"></i>

                <div class="inner-box">
                    <table>
                        <tr>
                            <td>
                                some text
                            </td>
                        </tr>
                    </table>
                </div>

                <i class="r1"></i>
                <i class="r1"></i>
                <i class="r2"></i>
                <i class="r3"></i>
                <i class="r5"></i>

            </div>

        </td>
    </tr>
</table>

А решение уже есть в комментариях, предложил его tapazukk:

Можно еще писать font-size:1px; (для старых ie или для 6-го в quirks mode)

Только нужно это видимо не только для старых и quirks, но и для IE7 если блок вложен в таблицу.

Вот ваш примерчик с этим дополнением.

Glook 29 августа, 2007 11:54

А ты поделись своим опытом со всеми :)

css
.r1, .r2, .r3 { display: block; line-height:1px;background: #dae0ff; }
.r3 { margin: 0 3px; }
.r2 { margin: 0 2px; }
.r1 { margin: 0 1px; }
.window{float:left}
.window-inner{background:#DAE0FF ;padding:0pt 2pt 2px;}
будьте внимательны при копировании

P.S. Тоже читаете Хабрахабр? :-)

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

P.S. Кто же его не читает :-)

P.S. У Вас в CSS-стиле: #buttons-bar input#quote-selected-button {width:13em;}
Маловато 13-то, у меня в FF фраза «Цитировать выделенное» видна полностью (и не выделяется из остальных кнопок) лишь при 14em.

вод код разметки:

вот стили:

.r1, .r2, .r3, .r4, .r5{
display: block;
overflow: hidden;
font-size:1px;
float: none;
}
.r5{
margin: 0 6px;
height: 1px;
background-color: #000;}
.r4{
margin: 0 4px;
height: 1px;
border-right: 2px solid #000;
border-left: 2px solid #000;
background-color: #CCCCCC;}
.r3{
margin: 0 3px;
height: 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.r2{
margin: 0 2px;
height: 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.r1{
margin: 0 1px;
height: 2px;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}
.inner-box {
padding:1em;
border-right: 1px solid #000;
border-left: 1px solid #000;
background-color: #CCCCCC;}