Как сделать этот вид равномерно рваной бумаги границы с CSS?

Question

, как вы можете видеть на изображении, это не просто пунктирная граница ... но это как ... двойная пунктирная граница, где каждый штрих смещен другим.

Как мне сделать это с помощью CSS?

Answer 1

Вы можете смоделировать это с помощью вложенных элементов div.

HTML:

<div class="border1">
    <div class="border2">
        <!-- Your content here -->
    </div>
</div>

CSS:

.border1 {
    border: 1px gray dotted;
}
.border2 {
    border: 1px gray dotted;
    width: 100%;
    height: 100%;
}

Также, вот скрипка , чтобы увидеть это в действии.

Answer 2

Если вы хотите создать рамку вокруг всего элемента, используйте рамку + контур, Fiddle: http://jsfiddle.net/fEwEp/

<div>Border around box</div>

div {
    border: 1px #333 dashed;
    outline: 1px #333 solid;
}

Если вы хотите, чтобы граница была только на одной стороне (например, сверху), вложите два элемента div и добавьте к ним границы.
Fiddle: http://jsfiddle.net/fEwEp/1/

<div class="border-top">
    <div>Border at top</div>
</div>

.border-top {
    border-top: 1px #333 solid;
}
.border-top > div {
    border-top: 1px #333 dashed;
}

Answer 3

Я не совсем уверен, как это работает, но вы можете использовать border-image.