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:

score 5 · Accepted Answer · answered Aug 11 '16 at 07:23

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;
}

Yup, exactly what I was looking for. Screw Firefox by the way. Has some glitch centering legend in fieldset. but `legend` fixes that. — ksno, Aug 11 '16 at 07:36

score 1 · Answer 2 · answered Aug 11 '16 at 07:13

1

If you want color transparency, you can write as color: rgba(255, 255, 255, 0.5); Here the last parameter alpha is your transparency level. You can set the transparency between 0 and 1.

answered Aug 11 '16 at 07:13

to which element should I apply this rule? I think transparancy of background or font color would **NOT** hide border, as it is trasnparent. – ksno Aug 11 '16 at 07:20
If you want to hide the border, then you can write as `border: 1px solid rgba(0, 0, 0, 0);` and that hides your border. – Aug 11 '16 at 07:22
Try using `fieldset` instead of the top `div` and for that number, you can set a `legend` instead of a `div`. – Aug 11 '16 at 07:33

score 1 · Answer 3 · answered Aug 11 '16 at 07:41

The first idea that came to my mind. Use a pseudoelement like .reg-step:after for the bottom border and border-image in .reg-step for the tricky top (as well as the left and right ones). Check this:

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;
    color: white;
    position: relative;
    text-align: center;
    padding: 0px 7px;
  
    border: 3px solid;
    border-image:   linear-gradient(to right, white 40%, transparent 40%,  transparent 60%, white 60%) 1;
}
.reg-step:after {
  content: " ";
  position:absolute;
  top:0px; left:0px;
  width:100%;
  height:100%;
  border-bottom: 3px solid white;
}
.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;
    display: inline-block;
    position: relative;
    top: -23px;
    width: 50px;
    border: 1px solid black;
}
.reg-step .steps-separator {
    width: 90%;
    margin: 20px auto;
    height: 1px;
    background-color: white;
    padding: 0px 7px;
}

<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>

Very interesting, I thought I should accept your answer as correct one, because the `
` tag is used to group related elements in a form. But then a little bit research and [its valid HTML5 to use fieldset without form](http://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form-tag) `:]` Honza was a bit faster.. — ksno, Aug 11 '16 at 07:45

How to cover piece of border with element over it?

3 Answers3