htmlcsstabs

How do you remove the bottom border of the last css vertical tab?

How do I go about removing the last 1px border from my CSS tab menu? The flow and feel looks clean except for that part of it.

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10pt;
}

.radio-tabs {
  display: flex;
  flex-flow: row;
}

#radio1:focus~.tabs #first-tab,
#radio2:focus~.tabs #second-tab,
#radio3:focus~.tabs #third-tab,
#radio4:focus~.tabs #fourth-tab {}

.tabs {
  display: flex;
  flex-flow: column;
  flex: 10%;
}


/* Tab button */

.radio-tabs .tab {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  padding: 1em;
  color: #000;
  background-color: #EEEEEE;
  height: 60px;
  border-bottom: 1px solid #CCCCCC;
}

.radio-tabs .tab:hover {
  background-color: #;
}

#radio1:checked~.tabs #first-tab,
#radio2:checked~.tabs #second-tab,
#radio3:checked~.tabs #third-tab,
#radio4:checked~.tabs #fourth-tab {
  background-color: #FFF;
  color: #1e262d;
  border-right: 0;
  font-weight: bold;
}

.tab-label {
  padding: 5px;
}

.radio-tabs .panels {
  flex: 70%;
  background-color: #FFF;
  color: #000;
}

.radio-tabs .panel {
  display: none;
  margin-left: 50px;
}

#radio1:checked~.panels #first-panel,
#radio2:checked~.panels #second-panel,
#radio3:checked~.panels #third-panel,
#radio4:checked~.panels #fourth-panel {
  display: block;
}

.radio-tabs .state {
  display: none;
}

.panels {}

.container {
  border: 1px solid #CCCCCC;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">

  <div class="radio-tabs">
    <input class="state" type="radio" title="Input1" name="input-state" id="radio1" checked />
    <input class="state" type="radio" title="Input2" name="input-state" id="radio2" />
    <input class="state" type="radio" title="Input3" name="input-state" id="radio3" />
    <input class="state" type="radio" title="Input4" name="input-state" id="radio4" />

    <div class="tabs">
      <label for="radio1" id="first-tab" class="tab">
        <span class="fa fa-home fa-3x"><span>
        <div class="tab-label">About</div>
      </label>
      <label for="radio2" id="second-tab" class="tab">
        <span class="fa fa-user fa-3x"><span>
        <div  class="tab-label">Who</div>
      </label>
      <label for="radio3" id="third-tab" class="tab">
        <span class="fa fa-key fa-3x"><span>
        <div  class="tab-label">Benefits</div>
      </label>
      <label for="radio4" id="fourth-tab" class="tab">
        <span class="fa fa-lightbulb-o fa-3x"><span>
        <div  class="tab-label">How</div>
      </label>
    </div>

    <div class="panels">
      <div id="first-panel" class="panel active animated slideInRight">
        <h3 class="slide-title">About the 360 Dealer Groups Education comparator</h3>
        <h4 class="slide-subtitle">Rating Financial Advisory Dealer Groups willingness & effectiveness for improving staff professionalism via education and training</h4>
      </div>
      <div id="second-panel" class="panel animated slideInRight">
        <h3 class="slide-title">Who</h3>
        <h4 class="slide-subtitle">Financial Planning and Advisory Dealer Groups with advisers and support staff</h4>
      </div>
      <div id="third-panel" class="panel animated slideInRight">
        <h3 class="slide-title">Benefits</h3>
        <h4 class="slide-subtitle left">Organisation</h4>
        <li class="slide-item">Rated and compared to peers for providing adequate education and traning to advisory staff</li>
        <li class="slide-item">Identifying skills gap in workforce for assistance and finding relevant subject matter specialists</li>
        <li class="slide-item">Benchmark of best practice systems, processes and capability</li>
        <li class="slide-item">Feedback of employees and external participants comments/views about organisation</li>
        <li class="slide-item">Retaining good staff by investing in them</li>
        <h4 class="slide-subtitle left">Empoloyees Participating</h4>
        <li class="slide-item">Confidentiality in their assessment of employer's efforts for ensuring appropriate education and training</li>
        <li class="slide-item">Obtaining assistance for particular skills development and training</li>
        <li class="slide-item">Employment and career satisfaction</li>
        <h4 class="slide-subtitle left">Australian Community</h4>
        <li class="slide-item">Appropriate financial advice from educated and experienced advisers</li>

      </div>
      <div id="fourth-panel" class="panel animated slideInRight">
        <h3 class="slide-title">How</h3>
        <h4 class="slide-subtitle left">5 Steps</h4>
        <ol>
          <li class="slide-item">Contact 360eduhub.com.au Representative</li>
          <li class="slide-item">Appoint organisation wealth champion</li>
          <li class="slide-item">Complete organisation & staff survey</li>
          <li class="slide-item">Feedback Session</li>
          <li class="slide-item">Ongoing review</li>
        </ol>
      </div>
    </div>
  </div>

</div>

Here is a pic of the problem:

enter image description here

Solution

  • You can remove the bottom border from the last label element by:

    .radio-tabs .tabs .tab:last-child {
  border-bottom: 0;
}


    body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10pt;
}

.radio-tabs {
  display: flex;
  flex-flow: row;
}

#radio1:focus~.tabs #first-tab,
#radio2:focus~.tabs #second-tab,
#radio3:focus~.tabs #third-tab,
#radio4:focus~.tabs #fourth-tab {}

.tabs {
  display: flex;
  flex-flow: column;
  flex: 10%;
}


/* Tab button */

.radio-tabs .tab {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  padding: 1em;
  color: #000;
  background-color: #EEEEEE;
  height: 60px;
  border-bottom: 1px solid #CCCCCC;
}

.radio-tabs .tabs .tab:last-child {
  border-bottom: 0;
}

.radio-tabs .tab:hover {
  background-color: #;
}

#radio1:checked~.tabs #first-tab,
#radio2:checked~.tabs #second-tab,
#radio3:checked~.tabs #third-tab,
#radio4:checked~.tabs #fourth-tab {
  background-color: #FFF;
  color: #1e262d;
  border-right: 0;
  font-weight: bold;
}

.tab-label {
  padding: 5px;
}

.radio-tabs .panels {
  flex: 70%;
  background-color: #FFF;
  color: #000;
}

.radio-tabs .panel {
  display: none;
  margin-left: 50px;
}

#radio1:checked~.panels #first-panel,
#radio2:checked~.panels #second-panel,
#radio3:checked~.panels #third-panel,
#radio4:checked~.panels #fourth-panel {
  display: block;
}

.radio-tabs .state {
  display: none;
}

.panels {}

.container {
  border: 1px solid #CCCCCC;
}
    <div class="container">

  <div class="radio-tabs">
    <input class="state" type="radio" title="Input1" name="input-state" id="radio1" checked />
    <input class="state" type="radio" title="Input2" name="input-state" id="radio2" />
    <input class="state" type="radio" title="Input3" name="input-state" id="radio3" />
    <input class="state" type="radio" title="Input4" name="input-state" id="radio4" />

    <div class="tabs">
      <label for="radio1" id="first-tab" class="tab">
        <span class="fa fa-home fa-3x"><span>
        <div class="tab-label">About</div>
      </label>
      <label for="radio2" id="second-tab" class="tab">
        <span class="fa fa-user fa-3x"><span>
        <div  class="tab-label">Who</div>
      </label>
      <label for="radio3" id="third-tab" class="tab">
        <span class="fa fa-key fa-3x"><span>
        <div  class="tab-label">Benefits</div>
      </label>
      <label for="radio4" id="fourth-tab" class="tab">
        <span class="fa fa-lightbulb-o fa-3x"><span>
        <div  class="tab-label">How</div>
      </label>
    </div>

    <div class="panels">
      <div id="first-panel" class="panel active animated slideInRight">
        <h3 class="slide-title">About the 360 Dealer Groups Education comparator</h3>
        <h4 class="slide-subtitle">Rating Financial Advisory Dealer Groups willingness & effectiveness for improving staff professionalism via education and training</h4>
      </div>
      <div id="second-panel" class="panel animated slideInRight">
        <h3 class="slide-title">Who</h3>
        <h4 class="slide-subtitle">Financial Planning and Advisory Dealer Groups with advisers and support staff</h4>
      </div>
      <div id="third-panel" class="panel animated slideInRight">
        <h3 class="slide-title">Benefits</h3>
        <h4 class="slide-subtitle left">Organisation</h4>
        <li class="slide-item">Rated and compared to peers for providing adequate education and traning to advisory staff</li>
        <li class="slide-item">Identifying skills gap in workforce for assistance and finding relevant subject matter specialists</li>
        <li class="slide-item">Benchmark of best practice systems, processes and capability</li>
        <li class="slide-item">Feedback of employees and external participants comments/views about organisation</li>
        <li class="slide-item">Retaining good staff by investing in them</li>
        <h4 class="slide-subtitle left">Empoloyees Participating</h4>
        <li class="slide-item">Confidentiality in their assessment of employer's efforts for ensuring appropriate education and training</li>
        <li class="slide-item">Obtaining assistance for particular skills development and training</li>
        <li class="slide-item">Employment and career satisfaction</li>
        <h4 class="slide-subtitle left">Australian Community</h4>
        <li class="slide-item">Appropriate financial advice from educated and experienced advisers</li>

      </div>
      <div id="fourth-panel" class="panel animated slideInRight">
        <h3 class="slide-title">How</h3>
        <h4 class="slide-subtitle left">5 Steps</h4>
        <ol>
          <li class="slide-item">Contact 360eduhub.com.au Representative</li>
          <li class="slide-item">Appoint organisation wealth champion</li>
          <li class="slide-item">Complete organisation & staff survey</li>
          <li class="slide-item">Feedback Session</li>
          <li class="slide-item">Ongoing review</li>
        </ol>
      </div>
    </div>
  </div>

</div>

    However, please note the comments which have pointed out problems with your HTML syntax. You may like to run your code through a validator (e.g. https://validator.w3.org/) to find out what is wrong.