CODEWITHSUNDEEP
htmlcss
RRGT19
RRGT19

Reputation: 1687

How to draw a border at the left of an element in a list

I'm doing an UI for a web application with bootstrap, font-awesome icons and I would like to replicate this style in a list:

enter image description here

I have tried:

HTML

  <ul role="list">

    <li class="btn p-0">
      agosto '20
      <i class="fas fa-chevron-right"></i>
    </li>

  </ul>

CSS

ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 0.8rem;
  list-style: none;

  li {
    border-radius: 0.25rem;
    background-color: #ffffff;
    border-left: 5px solid blue;
    text-align: start;
    i {
      color: #3C3E43;
      float: right;
    }
  }

}

My result so far:

enter image description here

I can't replicate the left border with its border-radius. Looks like cut off at the right and the space between the border and the text is not applied.

What I am missing?

Upvotes: 0

Views: 389

Answers (2)

Caleb Miller
Caleb Miller

Reputation: 1182

As you likely discovered, border-radius on the <li> rounds the entire list item, not just the left border.

A better solution here would be to use a pseudo element to create the rounded left "border" design. Something like:

li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 100%;
  border-radius: 5px;
  background-color: blue;
}

You may have to fiddle with the layout for your use case (height: 100% may not work, among other things), but that's the general direction to take.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274024

use pseudo element:

.box {
  padding: 5px 10px 5px 20px;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: blue;
  border-radius: 50px;
}
<div class="box"> some text</div>

Upvotes: 2

Related Questions