How to cover piece of border with element over it?

Question

In this example, there is a number hanging on the top of div's border. To make it clear, which part of border I would like to cover with number, I gave border for the number also. For sure, we could give background color for the number, but then body's background image is being hidden. How can we hide piece of border with numbers transparency?

HTML:

<div class="reg-step first-step">
   <span class="step-number">1</span>
   <img src="" alt="Register">
   <h1>Register</h1>
   <div class="steps-separator"></div>
   <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</div>

CSS:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
    background-color: blue;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

Desired result looks like this:

Answer 1

You can use

<fieldset>

for that.

check Fiddle https://jsfiddle.net/sepyzund/

html:

<fieldset class="reg-step first-step">
    <legend class="step-number">1</legend>
    <img src="" alt="Register">
    <h1>Register</h1>
    <div class="steps-separator"></div>
    <p>Lorem ipsum dolor sit amer, consetetur sed iam nonumy eirmod tempor invidunt ut labore et dolore magna aliquayam erat, sed diam vo</p>
</fieldset>

css:

body{ 
  background: blue;
  padding-top: 30px;
  background-image: url('https://pbs.twimg.com/profile_images/993504415/css_400x400.png')
}
.reg-step {
    width: 240px;
    height: 325px;
    border: 3px solid white;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
}
.reg-step h1 {
    font-size: 14px;
    text-transform: uppercase;
}
.reg-step p {
    font-size: 11px;
}
.reg-step img {
    display: block;
    margin: 10px auto 20px;
}
.reg-step .step-number {
    font-size: 40px;
    display: block;
    margin: 0 auto;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
        background-color: white;
    padding: 0px 7px;
}