边界差距和边界再次

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>

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

边界差距和边界再次

Border gap and border again

html

css

border