Menu
The result of the code below is this image:
Problem is that not all corners have border radius. This is due to the fact that the parent has a max-width and the border-radius only applies to the ends of the span.
Is there a workaround? Maybe with JS? To detect every new line and add another span with a background with border radius? Because of responsiveness I cannot add breaks in the span. On the desktop version it's one long line.
h1 span {
background-color: #272e3a;
-webkit-box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
padding: 5px;
border-radius: 4px;
font-size:40px;
line-height: 58px;
color:white !important;
}
h1 {
color: white !important;
max-width: 400px;
}
body {
padding:50px;
}<body>
<h1><span>Lorem ipsum dolor sit amet</span></h1>
</bodyQuestion: How to make all corners have border radius? Without editing the html?
897
CSS: box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want box-shadow-bottom-left-radius: 0.7em; box-shadow-top-right-radius: 0.7em; box-shadow-top-left-radius: 0.7em; There you go so you're adding a radius to the box shadow itself like you would normally do to a border.
The blur radius (required), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. For instance a shadow with 5px of horizontal offset that also has a 5px blur radius will be 10px of total shadow.
Got the solution. I had to add
box-decoration-break: clone;
and
word-break: break-word;
h1 span {
background-color: #272e3a;
-webkit-box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
box-shadow: 20px 0 0 #272e3a, -20px 0 0 #272e3a;
padding: 5px;
border-radius: 4px;
font-size:40px;
line-height: 58px;
color:white !important;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
word-break: break-word;
}
h1 {
color: white !important;
max-width: 400px;
}
body {
padding:50px;
}<body>
<h1><span>Lorem ipsum dolor sit amet</span></h1>
</bodyIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With