CSS: блок с закругленными углами и рамкой.

[Asar]

CSS: блок с закругленными углами и рамкой.

Есть нужда создать универсальный шаблон для блока, где все 4 угла будут закругленными, а вокруг блока будет 1-рх рама. А самое забавное - чтоб блок был резиновым.
Насчет 4 углов - единственный метод, до которого я додумался - делать 4 вложенных div'a, у каждого бэкграундом служить рисунок уголка. Но мне такой вариант несильно симпатичен - уж больно навороченный/противный код получается. Кроме того, хотелось бы еще и раму там видеть, а рамы нормальной не получится, потому как она будет залегать поверх этих самых уголков.
Люди, скажите, есть, может, какой способ, мне неизвестный, чтобы такого результата добиться, или же не дошла еще наука до него?

 

[crocodile2u]

Для mozilla:

свойство "-moz-border-radius". Больше это свойство ни одни браузер не понимает. То ли в CSS2.0, то ли в 2.1, а то ли в CSS3 - рекомендацией W3C является свойство border-radius, юзерагенты постепенно должны будут включить обработку этой фичи, мозилла вместо -moz-border-radius тоже, видимо, будет использовать border-radius.

-~{}~ 31.08.05 13:19:

Кроссбраузерное решение на данный момент - видимо, только твое, или схожее.

Насчет "рамы" - могу посоветовать добавить еще 4 дива с нужными бэкграундами, а уже в них положить дивы с уголками. ) Код от этого, как ты понимаешь, не очень-то выиграет...

 

[digs]

Три дива друг под другом.
1. Верхний/нижний делаешь два слоя друг в друга с уголками. в последний слой кладешь еще один слой с отступом справа и слева (margin) равным ширине уголка. И внутри него делаешь верхний/нижний бордер.
2. У среднего DIV-а делаешь правый и левый бордер

Если боишся что все это дело будет плясать, то помещаешь все три внутрь еще одного Дива

 

[Asar]

Спасиб за советы... Видимо, легче передумать дизайн...

 

[slach]

в гугле поищите по запросу CSS Nifty Corners
очень много интересного

 

[swamp_demon]

http://pro.html.it/esempio/nifty/
http://www.stunicholls.myby.co.uk/boxes/snazzy.html

 

[Bermuda]

Вот статейка, там расписано подробно.

http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders/

 

[Asar]

Нашел в гугле это:
http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html
Оттуда и черпал вдохновение (пользовал их ЯСкрипт).
Если у кого имеются какие комменты (типа недостатки какие радикальные у товарищей имеются, ЯС, все же...) - прошу в студию.
Для меня пока такой вариант очень неплох своей универсальностью.