Center a border image element of a specific width (CSS)

Question

I'm really new to CSS and just playing around. I searched in similar questions here but couldn't find quite what I was looking for.

I was looking at this tutorial on W3 and I want to add a border. Here is my current code:

<style>
    .center {
        text-align: center;
     }

    #borderimg2 { 
    border: 10px solid transparent;
    padding: 10px;
    border-image: url(https://www.w3schools.com/cssref/border.png) 35 stretch;
    }

</style>

 <div class="center">
 <p id="borderimg1" style="width: 200px"><font size="5"><b>Guides</b></font></p>
 </div>

The problem is that when I add the width element, it pulls everything (the border with the text inside) over to the left side. What I want is everything centered perfectly with the borderimage not stretching the entire width of the page.

Let me know if this doesn't make sense; I can add pictures.

Any help is appreciated! Also I'm assuming my code is sort of unorganized, so any general tips on organization or ordering would help! Thanks!

Answer 1

You've got the id wrong in CSS. Apart from that, use margin: 0 auto; on #borderimg1 and there you go!

.center {
  text-align: center;
}
#borderimg1 { 
  margin: 0 auto;
  border: 10px solid transparent;
  padding: 10px;
  border-image: url('https://www.w3schools.com/cssref/border.png') 35 stretch;
}

<div class="center">
  <p id="borderimg1" style="width: 200px">
    <font size="5">
      <b>Guides</b>
    </font>
  </p>
</div>

CodePen

Answer 2

Instead of

style="width: 200px"

try using padding- left & padding-right

If you do not know what padding or margin is, then click this