CODEWITHSUNDEEP
htmlcssreactjsflexbox
Aadhit Shanmugam
Aadhit Shanmugam

Reputation: 519

How to create a line with correct corner radius?

I'm making a react - redux application and I've recently run into a problem where I need to display a line next to certain text, to make it look like a quote. I used the border property in CSS and it came out like this.

enter image description here

But I would like it to be with corner radius in its places, like the following image,

enter image description here

This is the CSS and the HTML I am using to get,

.post-quote-layout{
    margin-top: 16px;
    background-color: white;
    border-left: #6D45FC solid 6px;
    height: 100%;

}


.post-quote-text{
    font-size: 17px;
    background-color:white;
    margin-left: 10px;
    line-height:26px;
}
<div key={index} className="post-quote-layout">
     <div className="post-quote-line">
        <p className="post-quote-text" dangerouslySetInnerHTML={{__html:item?.text}} />
     </div>
</div>

How do I achieve the result, I would like the line to be responsive as the content increases too.

Upvotes: 0

Views: 134

Answers (2)

Paulie_D
Paulie_D

Reputation: 115361

Use a pseudo-element positioned absolutely like so

div {
  width: 50vw;
  margin: auto;
  position: relative;
  padding-left: 10px;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: rebeccapurple;
  border-radius: 3px
}
<div>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa sequi mollitia assumenda repudiandae impedit quidem, ducimus adipisci a ullam tenetur minus minima molestias provident recusandae non amet sapiente nihil ad, commodi ut optio veniam illo
    qui! Enim, neque odit? Laboriosam quasi aperiam, molestiae culpa ipsum corrupti animi praesentium atque exercitationem.</p>
</div>

Upvotes: 2

Jose Miralles
Jose Miralles

Reputation: 552

Instead of using borders, have you tried using an svg line with its stroke-linecap property set to round?

stroke-linecap: round;

https://css-tricks.com/almanac/properties/s/stroke-linecap/

EDIT: Here is another approach if you want to stick to borders:

CSS border stroke line cap rounded

Upvotes: 0

Related Questions