Web Designer Wall
CSS & HTML

CSS Design Out Of The Box: Break Free of the Rectangle

By Aigars Silkalns Updated 7 min read

CSS Design Out Of The Box: Break Free of the Rectangle

Breaking out of the box in CSS means letting elements ignore the rectangular grid they were born in: a hero cut on a diagonal, a card that overlaps its neighbour, an image that hangs outside the text column, a paragraph that wraps around a circle. In 2027 you do all of it with a handful of properties, clip-path, shape-outside, mask-image, named grid lines and plain negative margins, and none of it needs a sliced background image.

When this article first appeared, the trick was to bake the logo and the flourishes into one big background image and hide the text with text-indent. That produced beautiful pages that nobody could resize, translate or read with a screen reader. Everything below stays real text and real images, so it scales, reflows and remains accessible. The original also showed off a gallery of boxed-layout-breaking sites; many of those are gone, so the examples are replaced by a short list of live sites further down.

Why layouts feel boxed in

Every element is a rectangle, and by default each one sits inside its parent’s content edge. Designs that feel “out of the box” almost always do one of four things: they cut the shape of a box, they overlap two boxes, they let content escape its column, or they wrap text around a non-rectangular shape. Each has a modern CSS answer.

You want Use Support (as of writing)
Diagonal or polygon edges clip-path: polygon() Baseline, widely available
Text flowing around a circle or cut-out shape-outside on a float Baseline, widely available
Soft fades and irregular reveals mask-image Baseline, widely available
Full-width bands inside a narrow column Named grid lines Baseline, widely available
Bevelled, scooped or notched corners corner-shape Not Baseline; check the compat table

Support moves, so treat this table as a snapshot and confirm on the linked MDN pages before shipping.

Cut the box with clip-path

clip-path trims everything outside a shape, including background, content and borders. A polygon() with percentage and calc() coordinates gives you a slanted bottom edge that works at every width.

A purple-to-orange hero with a slanted bottom edge and three white cards overlapping the cut
A clipped hero, with cards pulled up over the diagonal.
.hero {
  padding: 5rem 1.5rem 9rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
}

.next {
  position: relative;      /* paint above the clipped hero */
  margin-top: -4rem;       /* pull the cards up over the cut */
}

.card:nth-child(2) { translate: 0 -1.5rem; }

Two details matter. First, clip-path creates its own stacking context, so the element painted after it needs position: relative to appear on top; without it the hero covers your cards. Second, clipping only changes what is painted. The hero still occupies its full rectangle for layout, which is why the negative top margin is what creates the overlap.

polygon() is not the only option. path() clips to an SVG path in fixed pixels and is Baseline widely available, which makes it poor for fluid layouts. The newer shape() function takes responsive units and is Baseline newly available, so check your audience before relying on it without a fallback.

Clipped areas also stop receiving pointer events, so do not clip away part of a button. For more image-focused effects, see CSS3 Image Styles and 9 Simple CSS Image Filters.

Overlap with grid instead of negative margins

Negative margins work, but they guess how far to pull. When two things should sit in the same spot, put them in the same grid cell. Every child placed with grid-area: 1 / 1 stacks, later siblings paint on top, and the container sizes itself to the larger child.

A teal-to-yellow photo placeholder with a white card overlapping its bottom-right corner
One grid cell, two children, no absolute positioning.
.feature { display: grid; }
.feature > * { grid-area: 1 / 1; }

.photo { width: 80%; align-self: start; }
.card  { width: min(24rem, 70%); align-self: end; justify-self: end; margin-bottom: -2.5rem; }

Because both children stay in normal flow, the layout survives zoom and longer translations, and you can reorder the overlap with z-index without touching the markup.

Wrap text around a shape

The old print trick, text hugging a round photo, now takes one declaration. shape-outside redefines the float area of a floated element, so inline content follows the shape instead of the bounding box.

An orange sphere floated left with paragraph text curving around its edge
Text follows the circle, and the sphere hangs slightly outside the column.
.orb {
  float: left;                       /* shape-outside only affects floats */
  width: 15rem;
  aspect-ratio: 1;
  margin: 0 1.75rem 0 -3rem;         /* negative margin: out of the column */
  border-radius: 50%;
  shape-outside: circle(50%);
  shape-margin: 1rem;                /* breathing room around the curve */
}

@media (max-width: 700px) {
  .orb { width: 9rem; margin-left: 0; }
}

Besides circle() and polygon(), shape-outside accepts an image. Pixels whose alpha is above shape-image-threshold push text away, and transparent pixels let it flow in, so cut-out portraits and product shots wrap naturally. Using the same file as a mask keeps the visible shape and the wrap identical.

An orange blob floated left with text hugging its irregular outline
The wrap follows an SVG blob’s alpha channel.
.cut {
  float: left;
  width: 15rem;
  height: 15rem;
  margin-right: 1.5rem;
  background: radial-gradient(circle at 40% 35%, #ffc857, #e4572e);
  mask: url("blob.svg") center / contain no-repeat;   /* visible shape */
  shape-outside: url("blob.svg");                      /* text follows it */
  shape-image-threshold: 0.5;
  shape-margin: 0.75rem;
}

The image must be same-origin or served with CORS headers, otherwise the browser ignores it and wraps the plain box. That also means it fails when you open the page from file://, so test through a local server. On narrow screens, drop the float and the negative margin as shown earlier, because a shape beside a 320px column leaves no room for text.

Break out of the column with named grid lines

Articles usually live in a narrow reading column, yet you want an occasional band or image to span the full viewport. The classic fix, margin-inline: calc(50% - 50vw), causes a horizontal scrollbar on systems with classic scrollbars because 100vw includes the scrollbar. A grid with named lines avoids that.

A teal-to-yellow band spanning the full page width, fading at its top and bottom edges, between two short paragraphs
The text stays in the middle column; the band takes the outer columns.
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [content-start] min(42rem, 100% - 3rem) [content-end]
    minmax(1.5rem, 1fr) [full-end];
}

.page > *     { grid-column: content; }
.page > .full { grid-column: full; }

.band {
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

Every child lands in the centre column unless you give it the full class. The side tracks shrink to a 1.5rem gutter on phones and grow on wide screens, so there is no media query. For an in-between width, nest a second pair of lines around the content column:

.page {
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [wide-start] minmax(0, 6rem)
    [content-start] min(42rem, 100% - 3rem) [content-end]
    minmax(0, 6rem) [wide-end]
    minmax(1.5rem, 1fr) [full-end];
}

.page > .wide { grid-column: wide; }   /* bleeds a little past the text */

Fade and reveal with masks

The mask-image property uses the alpha of an image or gradient to hide parts of an element. In the band above, a vertical gradient makes the top and bottom edges dissolve. Unlike clip-path, masks can be soft, and they can use an SVG or PNG for organic, hand-drawn edges, as in the blob above. If you want a poster-style mosaic, our CSS grid mask poster layout shows a complete example, and the hexagon photo gallery grid applies the same idea to a gallery.

.avatar {
  mask: url("blob.svg") center / cover no-repeat;   /* alpha of the SVG is the shape */
}

Reveal shapes on scroll

A clipped or masked element can open as it enters the viewport. Scroll-driven animations tie a keyframe animation to scroll position, so no IntersectionObserver is needed:

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: open linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}

@keyframes open {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}

Content stays visible in browsers without support, because the rule simply does nothing. view() is not Baseline at the time of writing, so treat it as an enhancement and keep the reduced-motion guard.

Experimental: corner-shape

corner-shape changes the curve of rounded corners to bevel, scoop, notch, squircle and others, and it only works where border-radius is also set. It is not Baseline, so use it as progressive enhancement behind a feature query and let other browsers show ordinary round corners.

.badge { border-radius: 1.5rem; }

@supports (corner-shape: scoop) {
  .badge { corner-shape: scoop; }
}

Sites that break the grid

These live sites each step outside the plain rectangle in a different way. The screenshots are our own captures, and the descriptions only cover what is visible on the home page.

Jason Santa Maria home page with a circular portrait hanging in the left margin beside a large serif intro
Jason Santa Maria: a round portrait sits outside the text column, as in the shape-outside example.
OddCommon agency home page with a 3D logo, a phone mockup and a headline that runs off the right edge
OddCommon: oversized type runs off the viewport edge, and a photo is cut into a letter shape inside a yellow tile.
CSS-Tricks home page with a gradient-bordered panel and rows of overlapping circular avatars
CSS-Tricks: a gradient-bordered panel and overlapping circular avatars, both easy with the techniques above.

Accessibility and sanity checks

  • Keep text as text. Never put headings or buttons inside background images; screen readers, translation and zoom all fail.
  • Check overlaps at 320px. Negative margins and translations that look bold on desktop can cover content on phones, so reset them in a media query or with a container query.
  • Do not clip focus rings. A parent with clip-path or overflow: hidden cuts off the :focus-visible outline of children near the edge; add padding or use outline-offset inward.
  • Respect reading order. Visual overlap should not change DOM order; move things with CSS, not by reordering the markup.
  • Test zoom. At 200% text size, shapes that depended on fixed pixel heights break first, so prefer rem, % and aspect-ratio.

To go further, work through the 20 pro CSS tips, learn how columns collapse in responsive column layouts, and master alignment with CSS vertical centering.

60 comments from the archive

  3. Some nice looking sites and good tips which I could use for my next web site. I tend to stick to one type of layout but I will use these examples to try other layouts. Thanks for sharing.

  4. Main these are some refreshing designs!

    Seems like the internet was becoming one huge example of “invasion of the body snatchers”

    Very Inspiring Blog Post Now lets reface this place!

    —

    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  5. Very nice. CSS is wonderful altho’ bit challenging at times. I love to see how others have worked styles I have only dreamed about. Bookmarked your blog for regular reading… three thumbs up!

  6. Loving the examples here some truly inspirational stuff thanks for this!, still getting to grips with CSS trying to teach myself really. Consider this site bookmarked retweeted and various other socially acceptable thingies

  7. Love these, loving seeing folks push the boundaries. Very inspirational.

    And if I may add my own contribution, albeit not in the same league as any of those, Idyl Book Cafe

    If anyone wants to know how I did any of its tricks, feel free to ask. Hopefully I’ll remember!

  9. I like this a lot. The idea doing a web design in the fashion of a magazine has crossed my mind multiple times.

  10. @John Lascurettes – z-index is like layers (greater value is always in front).

  11. These are great! Will definitely take some of this inspiration to my own work.

  12. Great stuff and thank you for the inspiration! Only (small) caveat: You may end up needing a fix for IE6’s poor rendering of floated elements with negative margin. Here’s one that has worked for me in the past: <!–[if lt IE 7]> <style type=”text/css”>#your_selector {zoom:1; position:absolute;}</style> <![endif]–>

  13. This is a massive ‘gimmick’ that I see being used a lot at the moment. i think this design technique will have to be included in any 2009 design trend lists

  14. it’s hard facing the browser compatibility ! …but it’s possible if you drink a lot of coffee ;-)

  15. It’s so hard to break out of the box. I think some of the examples even tread on the line of being grid designs. I think I might play with this a little over the weekend if I get a chance! (:

  16. I’ve hit a roadblock these past couple of weeks looking for just this sort of thing. It’s articles like this that lead me to having kept this site on my list of RSS Subscriptions. Thanks, Nick.

  17. looking forward to more background based sites like fox, boxes looks boring :(

  19. errr…you missed the “d” in z-index in your diagram.

    Good list of site though!

  20. CSS positioning is brilliant… it’s the browsers that make it fall apart.
    I’ve created a few sites with overlaping images but had to spend hours making it work in internet explorer 6…
    And now of course we have IE 8!
    Having said all that, I’ll still try a few of your techniques.

  21. I bet you must be really busy this days nick, WDW got a very few updates for the past few months. :(

    Goodluck!

  23. Wow, remarkably high quality content as always. Also, since this is the first time that I’ve used the comment box, I want to remark that it is freaking cool as well. Web designers everywhere thank you :)

  25. wonderbra site looks very different and I too thought it to be flash! CSS when used well can give away a really design for a website. But in some companies, table like layouts alone can give a professional feel to the site.

    I liked the way huge inc site is structured too.

  26. Great CSS Tutorial………….
    Its very helpful to us understand Web Design

  30. Great article. Wondering where the word ‘layouted’ originates from, but soon got sidetracked by the wonderbra ;D

  31. Great post, and I certainly thing CSS is the next big thing, or even already is. If the web browsers could just all get along, things would be perfect.

  32. Just wanted to say that the background-position trick for the button is GENIUS, I feel so dumb for not thinking of that. Thanks!

  33. I always get nervous using negative positioning because of browser compatibility but I love the way the designs look. I want to try it on the next site i design.

  35. Those are some great sites! I love the idea of breaking outside of the lines, and have taken it upon myself to incorporate that into nearly every site I do and will do in the future.

    Keep up the inspirational posts,
    Carson

  36. What does “layouted” mean?

    And you were just looking at the “design” of the Wonderbra site right?

  38. That breakout-image trick is definitely a simple piece of genius. I’m still kicking myself for not seeing it from the start. Good mini-tut, too!

  39. Of course all people are tired of a typical columned and boxed layout. Obviously, these techlologies are already in the past. More effective solutions already exist. Hope that great examples provided in this post will inspire readers and new ideas will appear in the end.

  40. Thanx God for transparent PNG’s and CSS =) Good article and nice samples…

  41. The last example seems not working properly in IE6. Is there any way to make it work?

  42. Very, very cool. This has inspired me to redesign my website. The thing about web design is making something that stands out from the rest as there are millions of websites out there. Using these techniques give web pages depth and creativity. The nice thing is that as designers we can create anything to captivate an audience and this is a sure-fire way to do that. This is the next wave in innovative web design.

  43. Got to say I’m not a big fan over using too many postion: absolutes on a page but they do play a very important part in design layout. Nice post

  44. I have noticed that some people change their blog designs like others of us change the oil in our cars or more. It is great for them, but for me? Not so much.

  45. i would kill to work with you! i pretty much only use CSS and love it. I have so many design ideas that are completely out of the box yet everyone wants me to stick to the common layouts so that it doesn’t confuse people who are not so internet friendly. i think the only way to change this is to have more people have cool designs like you so that people get used to diff. layouts. nothings gonna change in the design world if we have to keep to the web standards of boring sites. god i wish we could design sites together.. they would be sick! i loveee you outlook on web design. awesome!

  46. This is the next wave in innovative design. There are some great examples here. The big challenge is using innovation without adding too many elements and confusing people who may not be completely Internet savvy.

  47. I’m one of the ones changing my website design regularly (for me that’s like every 2+ years). I find that in an ever evolving industry such as web design, it’s not so much as “keeping up with the Jones’s” but more an exercise in applying one’s newly learned ideas. Thanks for the great post!

  48. When finishing your web. Submit site to search engine to make the best ranking.

  49. Great article. I love looking at different, unique and stylish website design like that. Gives me some good ideas for my own work.

    Thanks.

  50. I love all the illustrations on this site ..it’s truly inspiring and even though i’m not artistic and it is a noob question but what program or programs do i have to learn to create such art? I’ve dabbled in Photoshop and i’m super keen to learn .
    Thanks

  51. I’m doing work experience with the people that designed the WonderBra site. :P

    Really looking forward to it, it’ll be in May.

  54. I used to think that Cheap uggs outlet UK were the ugliest I had ever seen.

  55. I used to think that Cheap UK were the ugliest uggs outlet I had ever seen.

  56. Want to make some change to your iphone 4? white iphone 4 Conversion Kit will be your best choice! Come and try on!

  57. White iphone 4 Conversion Kit is now the hottest iphone 4 piece that you should get!

  59. Complex 41 saç bakım seti, tamamen bitkisel ve doğal içeriği nedeniyle güvenle kullanabileceğiniz bir üründür. complex 41İçeriğindeki bitki özlerine
    (55 çeşit bitkinin özü vb.) aşırı hassasiyeti olan kişilerde saç derisinde bir miktarkızarıklık yapması doğaldır. Bu durumda kullanım sıklığını azaltmanız tavsiye edilmektedir.

  60. I’m still learning from you, but I’m trying to reach my goals. I certainly enjoy reading all that is posted on your site.Keep the stories coming. I liked it!

Comments are closed on this article.