hide border-top in center of div - html

Question

Here is what I am trying to achieve
This is in my div's open state so normally you do not see any filters but instead just a full circle. What I am having trouble with is I dont know how to prevent a border on a small section.
Here is what I have below as well as a Codepen
.bold {
font-weight: bold;
}
.bp-purple {
color: #9696ff;
}
.bp-nyan {
color: #67cfd6;
}
.bp-pink {
color: #e49092;
}
.bp-green {
color: #96cf6b;
}
.filter-options {
text-align: center;
margin: 15px 0 0 0;
}
.filter-options__intro {
text-transform: uppercase;
display: inline-block;
border: 1px solid #222;
border-radius: 50%;
height: 80px;
width: 80px;
padding: 30px 0;
color: #222;
}
.filter-options__intro i {
margin: -5px 0 0 0;
display: block;
}
.filter-options__intro:hover {
color: #f93;
}
.filter-options__selections {
border: 1px solid #222;
position: relative;
bottom: 30px;
background: #FFF;
text-align: left;
padding: 15px;
margin: 0 0 -25px 0;
}
.filter-options__selections .list-inline, .filter-options__selections .checkbox {
font-weight: bold;
text-transform: uppercase;
}
.filter-options__selections input {
margin: 0;
}
.filter-options__selections .first {
font-size: 1.2em;
}
.filter-options__selections .dotted-line {
margin: 0 0 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="filter-options">
<a href="" class="filter-options__intro">
<b class="center-block">Filters</b>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<div class="filter-options__selections clearfix">
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-purple">Categories:</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-nyan">Location:</li>
<li>Shanghai</li>
<li>Beijing</li>
<li>Hangzhou</li>
<li>Chengdu</li>
<li>Guangzhou</li>
<li>Shenzhen</li>
<li>Suzhou</li>
<li>Nanjing</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-pink">Brand:</li>
<li>Belle</li>
<li>St&Sat</li>
<li>Charles & Keith</li>
<li>Aldo</li>
<li>Daphne</li>
<li>Zara</li>
<li>Camel</li>
<li>Le Saunda</li>
<li>Tata</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-green">Price Range:</li>
<li>100 - 200</li>
<li>200 - 500</li>
<li>500 - 1000</li>
<li>1000 - 3000</li>
</ul>
</div>
<div class="dotted-line"></div>
<div class="checkbox">
<label>
<input type="checkbox" /> Show only free shipping products
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Do not show international products
</label>
</div>
<div class="dotted-line"></div>
</div>
</div>
</div>
Edit
Added sass tag as my codepen is in sass but not sure if stack lets me use it in snippets

Answer 1

First you need to make <a> position relatively.
.filter-options__intro {
position: relative;
}
Then add an css after selector, to cover up the black line
a.filter-options__intro:after {
content: '';
display: block;
background: white;
z-index: 1111;
position: absolute;
width: 75px;
height: 1px;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
top: 20px;
}
Working example:
Overlap element using CSS :after

Answer 2

Tried something that might help you:
Position the whole DOM of the link relative.
I had to use three DOM Elements to make it look like your output.
Positioned the content at z-index: 1.
Positioned others in higher z-index.
Gave a faux background.
* {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
text-decoration: none;
}
body {
background-color: #fff;
}
.center {
text-align: center;
position: relative;
z-index: 5;
}
.faux-cutter {
text-align: center;
display: inline-block;
overflow: hidden;
height: 30px;
border-bottom: 1px solid #fff;
position: relative;
z-index: 3;
background-color: #fff;
bottom: -2px;
}
.border {
padding: 10px 20px 30px;
display: inline-block;
border: 1px solid #666;
border-radius: 100%;
position: relative;
z-index: 4;
}
.content {
border: 1px solid #666;
padding: 25px;
text-align: center;
top: -2px;
position: relative;
z-index: 1;
}
<div class="center">
<div class="faux-cutter">
Hi
</div>
</div>
<div class="content">
Content here.
</div>
Preview

Answer 3

I would layer the semi-circle over the rectangle, and then I would add an inner absolutely positioned div to hide the bottom of the filters circle. You could do something like this:
.bold {
font-weight: bold;
}
.bp-purple {
color: #9696ff;
}
.bp-nyan {
color: #67cfd6;
}
.bp-pink {
color: #e49092;
}
.bp-green {
color: #96cf6b;
}
.filter-options {
text-align: center;
margin: 15px 0 0 0;
}
.filter-options__intro {
text-transform: uppercase;
display: inline-block;
border: 1px solid #222;
border-radius: 50%;
height: 80px;
width: 80px;
background: white;
padding: 30px 0;
margin-bottom: -25px;
color: #222;
}
.filter-options__intro i {
margin: -5px 0 0 0;
display: block;
}
.filter-options__intro:hover {
color: #f93;
}
.filter-options__selections {
border-top: 1px solid #222;
background: #FFF;
text-align: left;
}
.filter-options__selections-inner {
position:absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
left: 15px;
right: 15px;
background: white;
padding: 15px;
}
.filter-options__selections .list-inline,
.filter-options__selections .checkbox {
font-weight: bold;
text-transform: uppercase;
}
.filter-options__selections input {
margin: 0;
}
.filter-options__selections .first {
font-size: 1.2em;
}
.filter-options__selections .dotted-line {
margin: 0 0 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="filter-options">
<a href="" class="filter-options__intro">
<b class="center-block">Filters</b>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<div class="filter-options__selections clearfix">
<div class="filter-options__selections-inner">
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-purple">Categories:</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-nyan">Location:</li>
<li>Shanghai</li>
<li>Beijing</li>
<li>Hangzhou</li>
<li>Chengdu</li>
<li>Guangzhou</li>
<li>Shenzhen</li>
<li>Suzhou</li>
<li>Nanjing</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-pink">Brand:</li>
<li>Belle</li>
<li>St&Sat</li>
<li>Charles & Keith</li>
<li>Aldo</li>
<li>Daphne</li>
<li>Zara</li>
<li>Camel</li>
<li>Le Saunda</li>
<li>Tata</li>
</ul>
<a class="pull-right bold" href="">View All <i class="fa fa-caret-right" aria-hidden="true"></i></a>
</div>
<div class="dotted-line"></div>
<div class="clearfix">
<ul class="list-inline pull-left">
<li class="first bp-green">Price Range:</li>
<li>100 - 200</li>
<li>200 - 500</li>
<li>500 - 1000</li>
<li>1000 - 3000</li>
</ul>
</div>
<div class="dotted-line"></div>
<div class="checkbox">
<label>
<input type="checkbox" />Show only free shipping products
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />Do not show international products
</label>
</div>
<div class="dotted-line"></div>
</div>
</div>
</div>
</div>

Answer 4

You can't disable a portion of the border. I'd suggest adding a span to mask that particular part of the border with a small rectangular shape and z-index. Here is a forked pen with my changes.
I added a span with the class of 'mask' directly within your .filter-options div. <span class="mask"></span>.
Adding some CSS allowed me to build the shape of the mask using a solid white block. It will work as long as the background color remains white.
.mask {
background-color: white;
position: relative;
top: 4px;
z-index: 2;
width: 77px;
height: 3px;
display: block;
}