Html Question posted in
Some basic documentation can be found here.

Html – Multi-line text with border radius using CSS

I want get the multi-line text with background which has border-radius on every line and the background fits the text. Like the pic below but with radius at the highlighted circles as well.
enter image description here

Like below (radiuses shown in red)
enter image description here

Currently the code I have is shown below.

.container { position: absolute; text-align: center;} 

p{
display: inline; 
margin: auto 0.5rem;
text-align: center;
font-size:25px; 
position: relative;
background-color:green; 
color:#ffffff; 
text-align: center;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
border-radius: 0.5rem;
padding: 0.25rem;}
<div class="container">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur officia nemo nisi sapiente ipsum eum autem non. Voluptas eligendi illo minus omnis esse reiciendis rerum ut fuga odit libero!</p>
    </div>
Tags:

2

Answers


  1. 0 
    .container {
    position: absolute;
    text-align: center;
  }

  p {
    display: inline;
    margin: auto 0.5rem;
    text-align: center;
    font-size: 25px;
    position: relative;
    color: #ffffff;
  }

  .highlight {
    background-color: green;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 0.25rem;
    position: relative;
    z-index: -1;
  }

  .highlight:before {
    content: '';
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    left: -0.5rem;
    right: -0.5rem;
    background-color: green;
    z-index: -2;
    border-radius: 0.5rem;
  }
    <div class="container">
  <p class="highlight">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur officia nemo nisi sapiente ipsum eum autem non. Voluptas eligendi illo minus omnis esse reiciendis rerum ut fuga odit libero!
  </p>
</div>
    Login or Signup to reply.
  2. 0

    Just increase your line-height.

    p {
  ...
  line-height: 1.45;
}

    enter image description here

    .container {
  text-align: center;
} 

p {
  display: inline; 
  margin: auto 0.5rem;
  text-align: center;
  font-size: 25px;
  background-color: green; 
  color: white; 
  text-align: center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 0.5rem;
  padding: 0.25rem;
  line-height: 1.45;
}
    <div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur officia nemo nisi sapiente ipsum eum autem non. Voluptas eligendi illo minus omnis esse reiciendis rerum ut fuga odit libero!</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search