边界差距和边界再次

Question

当我尝试用边框做某事时，我陷入困境，这是我工作的照片：

你看到那个“play.oyunbaz.network”的东西有一个边框。我想让照片的底部接壤，以创造一个好的视图，但我不想边界“play.oyunbaz.network”的底部。

我尝试使用z-index，但它没有用。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

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

Answer 1

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

这是你想要的吗？尝试在“全页”模式下查看（展开代码段）。