Jess Mitchell

Upgrade Your CSS Styling with clip-path: Move over border-radius!

July 09, 2019

I’ve recently taken on the daunting task of redoing my dev portfolio. I’ve had a few versions of my portfolio in the past and, truthfully, I’ve never loved any of them. Whenever I do think about a redesign, I try to incorporate a bunch of fun CSS properties that I don’t get to use very often at work. (And then I get busy with work/life and somehow manage to never finish the original concept.😇)

While digging through some CSS docs trying to get inspired, I came across a property I had totally forgotten about: clip-path!

What is clip-path?

clip-path is a CSS property used to determine the shape of the visible area of an element. The element itself is still a rectangle because box model 🤷🏻‍♀️, but you can choose which region of that rectangle to actually make visible.

If you’ve been using for CSS for a bit, you’ve probably used border-radius to round the corners of an element. clip-path is similar but instead of rounding the corners you can choose whatever shape you’d like.

block with no border radius
No border-radius (default)
block with rounded corners
With border-radius

A word on border-radius

Depending on your design aesthetic, border-radius can be super helpful for softening edges and giving your elements a more relaxed feel. This is especially the case if there are already style choices being used that give your elements a visual edginess, like bright colours.

For the most part, border-radius will cover all your shaping needs. But — let’s be honest — round edges are not so impressive when you’re trying to show off some CSS skills.

So let’s take a look at what clip-path can actually do and how to create basically any shape.

What do you mean “any shape”?

cactus with no clip-path applied
Boring photo of a not boring cactus

You can turn your elements into *basically* any shape. I’ll leave it to you to push the limits of that.

Take this photo of a cactus cluster from my living room, for example. It’s fine but it’s just the default rectangular shape, so let’s take it up a notch.

Let’s say we want to focus on the cactus itself. Without any photo editing, we can specifically show a circle shape and make the area outside the circle hidden with just one line of CSS styling:

    img {
        clip-path: circle(30% at 495px);
cactus with round clip-path applied
Cactus image appears to be circular without having to edit the image

Note: the “at 495px” isn’t necessary; it just shifts the circle to the right 495px so the cactus is centred in the circle.

Now our image appears to be the shape of a circle and we haven’t had to edit the original photo at all.

Circles are fun but what else can clip-path do?

In this case “circle()” is a bit of a shortcut because the shape we make doesn’t actually have to have the same diameter all the way around. We can also use “ellipse()” instead to create a circle or oval shape. To create an oval, use this (but with values relevant to your photo):

    img {
        clip-path: ellipse(100px 200px at 493px 200px);
cactus with ellipse clip-path applied
Total ellipse of the heart ❤

Now let’s say you love a circle but you’re really more of a witchy dev who wants to show off your love of crystals and all things geometric. (I don’t know, just go with it.) You can create whatever polygon shape you want using the “polygon()” value, such as:

    img {
        clip-path: polygon(81% 0%, 88% 50%, 71% 98%, 33% 43%);
cactus with asymmetrical clip-path applied
Adding some asymmetry for some visual interest

Starting from the top and moving clockwise, we can position the x- and y-coordinates of each of the four points to create a custom polygon of our choosing.

I chose a shape with four points but you can have more or less — totally up to you!

There are a lot more options for the value, plus styling SVGs, but you get the picture; pick your shape and then create it with the “circle()”, “ellipse()”, “polygon()”, etc. values.

In addition to shaping elements on your site, you can use clip-path to create shapes for background designs too. Let’s say you want to make your text’s backdrop a little more interesting, try something like this:

Multiple shapes with clip-path applied
Basic shapes for a not basic background

with this:

.shape { 
    content: '';
    height: 65vh;
    width_: 90vw;
    left: 5vw;
    position: absolute;
    margin: auto;
    z-index: -1;

.shape1 {
    background-color: grey;
    clip-path: polygon(81% 10%, 88% 50%, 71% 98%, 36% 82%);

.shape2 {
    background-color: coral;
    clip-path: polygon(46% -10%, 114% 49%, 77% 100%, 36% 65%);

.shape3 { 
    background-color: lightpink;
    clip-path: polygon(16% 12%, 37% 15%, 45% 5%, 72% 66%, 14% 93%, 0% 41%, 6% 35%);

Properties like clip-path are great because they’re a tool you can use for simple changes, or for getting super creative.

Okay, that’s cool, but what’s the cross-browser compatibility?

The short answer is it’s good enough (for my purposes at least!) Check out the full breakdown here but you can use it on all browsers other than IE and Edge.

For more details on all the different options for getting the shape you want, check out MDN’s documentation.

Happy coding! 🌿

July 9, 2019


Hi, I'm Jess. I write about software development, health, and how the two can relate. 🌿 Follow me on Twitter