CSS Custom border using content property

Question

Im hoping to create a custom border something like the below image using the CSS content property:

Is this possible?

Snippet below for where I got to

 .box { height: 100px; width: 100px; padding: 15px; } .customBorder { content: 'X'; border: 10px dashed red; }

 <div class="customBorder box"> Custom Border Test </div>

I'm also open to jQuery answers.

Answer 1

You can not use the content in the border. The solution is to use border-image to create a custom border

 #borderimg1 { border: 30px solid transparent; padding: 15px; -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */ border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; }

 <p id="borderimg1"> create the border.</p>