Как сделать так чтобы контент залазил под border-image?
У меня есть типичный блок, на который по заданию нужно накинуть border-image.
Как мне сделать так, чтобы контент залазил под бордер?
Без этого имею большие отступы и совсем некрасиво.
.border {
border: 100px solid transparent;
-webkit-border-image: url('https://i.stack.imgur.com/MXyAI.png') 100 100 stretch;
}<div class="border" style="overflow: auto; min-width: 100px;">
<h2 style="text-align: center;">ФУТБОЛ</h2>
<img src="https://i.stack.imgur.com/8Gjml.jpg" width="200" style="margin: 0 20px 20px 0">
<p>Футбо́л (англ. football от foot «ступня» + ball «мяч») — командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее количество раз, чем команда соперника. В настоящее время самый
популярный и массовый вид спорта в мире</p>
<p>Есть 17 официальных правил игры, каждое из которых содержит список оговорок и руководящих принципов. Эти правила предназначены для применения на всех уровнях футбола, хотя есть некоторые изменения для таких групп, как юниоры, взрослые, женщины и люди
с ограниченными физическими возможностями. Законы очень часто формулировались в общих чертах, которые позволяют упростить их применения в зависимости от характера игры. Правила игры публикуются в ФИФА, но поддерживаются Международным советом футбольных
ассоциаций</p>
</div>