CODEWITHSUNDEEP
cssborder
Ls3011
Ls3011

Reputation: 33

How to apply CSS border color for left side of an ellipse?

I am trying to apply a white border to the left side only of an ellipse and keep the other sides as transparent.However, the border is not getting applied to the whole portion of left side.What changes are required to get the expected output shown? 

#ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  border: solid;
  border-color: transparent transparent transparent white
}
<body>
  <button id="ellipsis"></button>
  <button id="ellipsis"></button>
  <button id="ellipsis"></button>

</body>

Link to my code: https://jsbin.com/bebekirano/edit?html,output

Expected output

Upvotes: 2

Views: 246

Answers (1)

Temani Afif
Temani Afif

Reputation: 273389

consider box-shadow instead:

.ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  box-shadow:-2px 0 0 2px #fff;
  border:none;
}
<body>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>

</body>

In case you want transparency, here is a trick with radial-gradient:

.ellipsis {
  background-color: #3ebede;
  height: 25px;
  color: #000;
  position: relative;
  padding: 4px 15px 4px 30px;
  width: 200px;
  border-radius: 20px;
  margin: -4px -25px -4px -4px;
  text-align: left;
  display: inline-block;
  border:none;
}
.ellipsis:not(:last-child) {
  background:radial-gradient(4px 3px at right,transparent 30px,#3ebede 31px); 
}

body {
  background:#ddd;
}
<div>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>
  <button class="ellipsis"></button>

</div>

Upvotes: 7

Related Questions