CODEWITHSUNDEEP
htmlcss
birdyoung
birdyoung

Reputation: 207

Border radius rounded for two lines of text

I'm trying to create a multi line rounded border like the one in the photo attached to this. But I've only been able to do it to each line separately (see code/codepen). Is there a way to do this with css or is it something for JS?

<div class="background">
  <div>
    <span>This is text This is text This is text This is text</span> <br> <span>This is text This is text This is text This is text This is text </span>
  </div>
</div>

.background {
  background-color: black;
  padding: 5rem;
}

span {
  display: inline-block;
  color: white;
    background: red;
        border-radius: 15px;
        -moz-border-top-left-radius: 15px;
        -webkit-border-top-left-radius: 15px;
        border-top-left-radius: 15px;
        -moz-border-bottom-right-radius: 15px;
        -webkit-border-bottom-right-radius: 15px;
        border-bottom-right-radius: 15px;
        -moz-border-top-right-radius: 15px;
        -webkit-border-top-right-radius: 15px;
        border-top-right-radius: 15px;
        -webkit-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
        padding: 15px;
        color: white;
        font-size: 50px;
        text-transform: uppercase;
        font-weight: 500;
}

https://codepen.io/mattmcgilton/pen/BajwvRv

enter image description here

Upvotes: 3

Views: 2391

Answers (5)

Asifuzzaman
Asifuzzaman

Reputation: 1783

You Can try the below css .Hope it helps

.title {
     font: 1.76rem Ubuntu, sans-serif;
     text-transform: uppercase;
     margin-bottom: 1rem;
}
 .title .highlight {
   color: white;
   background: red;
   border-radius: 15px;
     display: inline;
     background: #ee4035;
     color: white;
     margin-bottom:15px;
     -webkit-box-decoration-break: clone;
     -ms-box-decoration-break: clone;
     -o-box-decoration-break: clone;
     box-decoration-break: clone;
   
   padding: 12px;
   color: white;
   font-size: 50px;
   text-transform: uppercase;
   font-weight: 500;
}

 html, body {
     background: #ccc;
     text-align: left;
     padding: 3%;
}
 
<div class="title">
  <div class="highlight">
    <span>This is text This is text This is text This is text</span> <br> <span>This is text This is text This is text This is text This is text </span>
    
  </div>
</div>

Upvotes: 3

Marik Ishtar
Marik Ishtar

Reputation: 3049

.background {
  background-color: black;
  padding: 5rem;
}

span {
  display: inline-block;
  color: white;
  background: #ED242E;
  border-radius: 5px;
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 15px;
  color: white;
  font-size: 21px;
  text-transform: uppercase;
  font-weight: 700;
}

.background span:first-child {
  border-bottom-left-radius: 0;
}

.background span:last-child{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
<div class="background">
  <div>
    <span>This is text This is text This is Text</span> <br> <span>This is text This is text </span>
  </div>
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Have a different radius setting for each line that's not the first one and overlap the spans using a negative margin.

.background {
  background-color: black;
  padding: 5rem;
}

span {
  display: inline-block;
  color: white;
  background: red;
  border-radius: 15px;
  padding: 15px;
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 500;
}

span:not(:first-child) {
  margin-top: -20px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
<div class="background">
  <div class="text">
    <span>This is text This is text This is text</span> <br> <span>This is text This is text </span>
  </div>
</div>

Upvotes: 0

adamgy
adamgy

Reputation: 5613

You can apply separate CSS styles for each corner using:

  • border-top-right-radius
  • border-top-left-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

and the corresponding styles for Mozilla and WebKit

An example using two classes to distinguish the top and bottom rows:

.background {
  background-color: black;
  padding: 5rem;
}

span {
  display: inline-block;
  color: white;
    background: red;
        padding: 15px;
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 500;
}

.top{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.bottom{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
<div class="background">
  <div>
    <span class="top">This is text This is text This is text This is text</span> <br> <span class="bottom">This is text This is text This is text This is text This is text </span>
  </div>
</div>

If you start fiddling around with this, you will soon realize that you must add some additional logic if your lines are expected to have variable lengths, and perhaps more classes/ids if you have more than two lines/rows.

Upvotes: 2

andy
andy

Reputation: 17

One way I found to be able to achieve that effect is to first put an id on both the spans and alter their CSS separately:

    <div class="background">
     <div>
    <span id="line1">This is text This is text This is text This is text</span>       <br> 
    <span id="line2">This is text This is text This is text This is text This is text </span>
  </div>
</div>

Then changing their CSS using the border-"bottom/top"-"left/right"-radius in the CSS to alter the border radius differently for each corner like this:

#line1 {
     display: inline-block;
        color: white;
        background: red;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        -webkit-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
        padding: 15px;
        color: white;
        font-size: 50px;
        text-transform: uppercase;
        font-weight: 500;
}

#line2 {
        display: inline-block;
        color: white;
        background: red;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-right-radius: 15px;
        -webkit-box-decoration-break: clone;
        -o-box-decoration-break: clone;
        box-decoration-break: clone;
        padding: 15px;
        color: white;
        font-size: 50px;
        text-transform: uppercase;
        font-weight: 500;
}

That should get you the effect you want.

Upvotes: 0

Related Questions