Как сделать dashed border c одинаковыми углами на CSS?

Question

[ASultonov]

Здравствуйте. Хочу сделать с помощью CSS такую рамку:

Пишу я значит border: 15px dashed #000; и получается вот такое:

Углы не такие каких хотелось бы. Помогите, пожалуйста.

Answer 1

[Владик Лимонадик]

Че-т не понимаю, в чем проблема

Есть инфа что вы не на тот селектор кидаете бордер

Comments

[ASultonov]

На тот селектор. Просто хочу, чтобы углы были целлые, симметричные как выше. А у меня "сломанные". Сейчас уже понимаю, что это зависит от высоты и ширины элемента.

Answer 2

[Алексей Быков]

Как писал господин выше, у вас что-то не то. Код покажите.

И нет, от ширины и высоты не зависит. Вот — изменяйте размер окна сколько влезет.

Comments

[Anton Filippov]

и вы хрень морозите прикладываете примеры в которых проблема не решена i.imgur.com/yqaFYWN.png

[Алексей Быков]

Антон Ф.: файрфокс, небось?

[Anton Filippov]

Алексей Быков: да ff dev edition

[Anton Filippov]

Алексей Быков: в хроме еще хуже выглядит))

[ASultonov]

Алексей Быков, никаких проблем с размером окна нет.

[Алексей Быков]

Я не знаю, что за хром у вас, там должно быть все ок, а вот фф обрабатывает дашед рамку от углов. Это можно увидеть, разбив бордер на бордер-топ итд. Это особенность. Проще подобрать размеры рамки, чем мучаться.

Answer 3

[chupok]

А если по всем краям прикрепить блок или псевдоблоки (лучше!): горизонтальные - 100% по ширине и 10px по высоте, вертикальные - 100% по высоте и 10px по ширине. Далее выставляем изображение в качестве фона: для горизонтальных - это картинка размером 50х10px, где черным цветом окрашена прямоугольная область в 30px, а остальная область - прозрачная. Изображение, конечно же, множится по X- или Y-оси, в зависимости от положения блока. Для вертикальных блоков - то же изображение поворачиваем на 90 градусов. Может так как-то?

Comments

[Anton Filippov]

тогда уже проще сделать по блоку с бефоре и афтером слева и справа

[chupok]

Антон Ф.: так я и написал, что лучше псевдоблоки прописывать.

[ASultonov]

chupok, если я вас правильно понял, то и тогда будет такая же проблема при изменении ширины и высоты блоков. Но я попробую, спасибо.

[chupok]

ASultonov: Всегда проще отвечать, когда есть проблемный фрагмент кода - это на будущее. Здесь, думаю, еще во много будет зависеть от того, как вы реализуете изображение, ведь есть несколько вариантов. Первый - окрашиваем первые 30 из 50 пикселей по ширине, второй - окрашиваем 30 пикселей по центру, третий - окрашиваем последние 30 пикселей. При этом здесь, в отличие от границы на CSS, блоки (а лучше использовать, как уже было сказано, псевдоблоки!) будут "заезжать" друг на друга, а это значит, что есть вероятность того, что углы будут ровными (при верном построении картинки) в любом случае.