Search code examples
csscellcurve

cell border expand beyond

In below html/css code left borders of the first two cells are used as range brackets. Is it possible to make the borders appear as shown in the below screenshot?

enter image description here

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}

.Column {
  display: table-cell;
  border-style: solid;
}

.Column:nth-child(1) {
  width:20%;
  border-left: none;
  border-top: none;
  border-bottom: none;  
}
.Column:nth-child(2) {
  width:50%;
  border-left: none;
  border-top: none;
  border-bottom: none;
  text-align: center;
}
.Column:nth-child(3) {
  width:30%;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
<div class="Row">
  <div class="Column"></div>
  <div class="Column">Accepted Range</div>
  <div class="Column"></div>
</div>

Solution

  • you can use 

    border-radius: 7px;

    hide right border in central column and show left border in the right one

    .Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 5px;
}

.Column {
  display: table-cell;
  border-style: solid;
  border-radius: 7px;
}

.Column:nth-child(1) {
  width:20%;
  border-left: none;
  border-top: none;
  border-bottom: none;  
}
.Column:nth-child(2) {
  width:50%;
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right:none;
  text-align: center;
}
.Column:nth-child(3) {
  width:30%;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
    <div class="Row">
  <div class="Column"></div>
  <div class="Column">Accepted Range</div>
  <div class="Column"></div>
</div>