Alper Berber Alper Berber - 4 months ago 28
CSS Question

Border gap and border again

I got stuck when I'm trying to do something with borders, Here's photo of my work:
my work

you see that there's a border on that play.oyunbaz.network stuff. I want to make the bottom of photo bordered to to create a good view but I don't want to border the bottom of that play.oyunbaz.network thing.
Here's the html of the div over there:

<div class="container ipbar">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="oyunbaz-ip">
<p>
play.oyunbaz.network
</p>
<span>
connect now and join <strong>700</strong> other players now!
</span>
</div>
</div>
</div>
</div>


and here's the css

.ipbar .row .col-md-6{
color: #4c4c4c;
background-color: #eeeeee;
border-style: solid;
border-color: #4c4c4c;
border-width: 5px 5px 0px 5px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.ipbar .row .col-md-6 p{
font-size: 40px;
margin-bottom: -5px;
text-transform: uppercase;
color: #9bb0c8 !important;
font-weight: bold;
}


I tried to use z-index but it didnot work :(
Thanks for your helps btw.

Answer

.top {
  border-bottom: 5px solid #4c4c4c;
}
.ipbar{  }
.ipbar .row .col-md-6 {
  color: #4c4c4c;
  background-color: #eeeeee;
  border-style: solid;
  border-color: #4c4c4c;
  border-width: 5px 5px 0px 5px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  z-index:1000; 
  bottom:-5px;
}

.ipbar .row .col-md-6 p {
  font-size: 40px;
  margin-bottom: -5px;
  text-transform: uppercase;
  color: #9bb0c8 !important;
  font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="top">
<div class="container ipbar">
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <div class="oyunbaz-ip">
        <p>
          play.oyunbaz.network
        </p>
        <span>
          connect now and join <strong>700</strong> other players now!
        </span>
      </div>
    </div>
  </div>
</div>
</div>

Is this what you want? Try viewing it on Full Page mode(Expand Snippet).