DEV Community

loading...
Cover image for Single-Side Curved "Border" With CSS `box-shadow`

Single-Side Curved "Border" With CSS `box-shadow`

5t3ph profile image Stephanie Eckles ・3 min read

I was posed a CSS design question via Twitter DM and while I won't guarantee I'll always provide a solution for free, this one I was enticed to try solving.

A preview of what we'll make:

preview of the final CSS design for a blockquote with a left border that appears curved

Here are a few possible ways to solve this:

  • Draw a pseudo element and use clip-path to cut off half of it
  • Use border-image with an SVG to precisely define the curve and the placement of the corners
  • A somewhat sneaky application of box-shadow, which we're going to pick

Now, box-shadow is going to be the least precise corners but it does the trick!

We're going to create these styles in the context of a basic blockquote:

<blockquote>
    <p>Lemon drops carrot cake gummies cake marzipan sesame snaps muffin dragée halvah. Candy caramels cupcake caramels soufflé pie macaroon. Gingerbread chocolate cake ice cream macaroon tootsie roll bonbon cotton.</p>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

And the relevant CSS:

blockquote {
  /* Define curve */
  border-radius: 0.75em;
  /* Negative value becomes "border" width */
  box-shadow: -2px 0 #858aaa;
  /* Add space from the "border" */
  padding-left: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

Which produces the following:

blockquote with the border style applied

The curvature of the border-radius cuts off the box-shadow so that it peeks out just enough to appear like a curved border. And since we didn't define a blur value, the box-shadow appears solid.

But what is that little extra space above and below the paragraph? Well, it has to do with font leading which you can read more about in this fantastic article about a near future solution.

For now, we need to do two steps:

  • create a new "block formatting context" (a bit confusing topic, here's the MDN docs)*
  • add negative margins to negate the leading

To create a new block formatting context, there are a few options, but for our purposes for wanting negative margins to hike the element sort of both up and down, we'll use grid (flexbox would also work).

/* Add to `blockquote` */
display: grid;
Enter fullscreen mode Exit fullscreen mode

Then, we'll adjust our paragraph rules and add negative margin using a newer CSS unit - ex - which is equal to x-height in the current font. This value is a bit magic and will vary font to font - you may find em to be better until leading-trim properties have full browser support:

blockquote p {
  /* Required to handle "leading" */
  /* May need adjusted per font */
  margin: -0.75ex 0;
}
Enter fullscreen mode Exit fullscreen mode

Demo

Here's the CodePen demo with a bit of extra content for more context for the blockquote:

On my main blog - ModernCSS.dev - I released a tutorial covering various ways to produce borders with CSS with more ideas!

  • s/o to Miriam Suzanne for helping identify what was going on when I accidentally made this happen for this demo, haha!

Discussion (5)

pic
Editor guide
Collapse
cchana profile image
Charanjit Chana

I don’t really understand why specifying display: grid is required. The default block should be enough and commenting that line it makes no difference as far as I can see?

I like how you’ve used shadows to solve this, I probably used a border and either flattened the side or left it with untidy corners. This is a much better solution!

Collapse
5t3ph profile image
Stephanie Eckles Author

Try toggling it with browser DevTools instead of within CodePen to see a slightly more immediate effect. Without it, the negative margins on the paragraph do not resolve the leading space (as described). I checked that behavior is the same in Chrome, Firefox, and Safari so let me know if you are using something different.

Collapse
cchana profile image
Charanjit Chana

Ah, I see now toggling with the dev tools. I was trying on mobile so wasn't obvious what was happening!

Collapse
jlrxt profile image
Jose Luis Ramos T.

Gracias por el artículo.

Collapse
isarisariver profile image
Marian Beck

Neat, thanks for sharing!