Require help on implementing border design

Question

Have to implement a design where I am confused on how to implement the border design. Attached is the pic which I am trying to implement.

I am trying to figure out how to implement that border ui based on selecting the type of filter I want to select. The same applies for the other two tabs. Also the option's are not visible until and unless the user explicitly selects it. I have searched on codepen.io but did not get the required results. I know such type of css exist however I am unable to get the specific words/term to search for it.

Here's the work I have done so far

HTML


  
    
      TEAM
      

      ALL
    
    
      POSITION
      

      ALL
    
    
      PRICE
      

      ALL
    
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5

--

CSS

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
}
.option_header {
  display: inline-block;
  width: 33.33%;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
}
.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}

P.S:- I have corped the pic to the required detail as I have seen fit. In case you would like to have the whole pic, please do let me know.

Also, I know some of you might say where is the code that shows implementation of the border. And my response to that is because I cannot cut merge that minor portion of the border between the two divs, aka between the price tab and it's options, I have not implemented at all.

Asons · Accepted Answer

Here is a solution, where you move the tabs 1 pixel down, and when they get a background they will cover the border below. See notes in CSS.

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                      /*  added so z-index work       */
  z-index: 2;                              /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);              /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                    /*  added  */
  background: lightgray;                    /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}


  
    
      TEAM
      

      ALL
    
    
      POSITION
      

      ALL
    
    
      PRICE
      

      ALL
    
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5

Updated

If you only want to wrap border around the "ALL" text, simply change their elements to a div, remove the and change this CSS rule

.option_header[data-filter-type="team"]

to

.option_header[data-filter-type="team"] div

Stack snippet

.search_options_container {
  text-align: center;
}
.search_option_tab {
  display: flex;
  padding-top: 6px;
  position: relative;                          /*  added so z-index work       */
  z-index: 2;                                  /*  put tab's in a higher layer */
}
.option_header {
  display: inline-block;
  width: 33.33%;
  transform: translateY(1px);                  /*  push the tabs 1px down so they
                                               cover the below border */
}
.option_header[data-filter-type="team"] div {  /*  added new rule  */
  border: 1px solid red;
  border-bottom: none;
  background: lightgray;
}
.options_container {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  background: white;
  z-index: 1;
  padding-top: 6px;
  height: 180px;
  overflow: auto;
  border: 1px solid red;                       /*  added  */
  background: lightgray;                       /*  added  */
}

.options_container > .filter-option {
  display: inline-block;
  padding: 5px;
  border-bottom: 1px solid black;
  width: 80%;
}
.options_container > .filter-option:last-child {
  border-bottom: none;
}


  
    
      TEAM
      ALL
    
    
      POSITION
      ALL
    
    
      PRICE
      ALL
    
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
  
  
    All
    Option 1
    Option 2
    Option 3
    Option 4
    Option 5

Require help on implementing border design

HTML

CSS

Answers (2)

Related Questions