CODEWITHSUNDEEP
css
Riten
Riten

Reputation: 43

Need to add border-radius to the border of an element

Image to explain the issue

I am adding a left border to the list-item element. width of border is 4px. Also, it needs to have rounded corners (border-radius of 4px).

Is this possible through CSS? I had gone through some tutorials and not able to fix this via CSS.

Upvotes: 4

Views: 7480

Answers (2)

IvanS95
IvanS95

Reputation: 5742

If I understood correctly, you want the bar at the left side (border) to have rounded top and bottom; if you are using a border, you can't exactly make it curve as I think you intend, you would need to create this bar separately to make it look with curved corners.

Now you can build this bar with a div, a span or even pseudo-elements like :before, that's up to you; but I just want to show you the logic behind what I mean withe the example below

.box {
  width: 200px;
  height: 50px;
}

.item {
  border-left: 4px solid blue;
  border-radius: 4px;
  /* Or
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  */
  padding-left: 10px;
}

.item2 {
  display: flex;
}

.item2 .bar {
  width: 4px;
  background-color: blue;
  border-radius: 4px;
  margin-right: 10px;
}
<div class="box item">
  <span>Your Text</span>
</div>

<hr>

<div class="box item2">
  <div class="bar">
  </div>
  <span>Your Text</span>
</div>

Upvotes: 2

Vsevolod Fedorov
Vsevolod Fedorov

Reputation: 521

You can do this by pseudoclass :before

h1 {
  position: relative;
  padding-left: 10px;
}
h1:before {
  content: '';
  height: 100%;
  width: 4px;
  border-radius: 10px;
  background: #000;
  display: block;
  position: absolute;
  left: 0;
}
<h1>Element Text</h1>

Upvotes: 2

Related Questions