The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Tucked Corners

Last updated on:
<div class="corners">
body {
    background: #e6e6e6;
.corners { 
    background: #f6f6f6;
    height: 700px;
    margin: 50px auto;
    max-width: 600px;
    position: relative;
    width: 80%;
    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
/* Corner Effect */
.corners:before {
    background: #e6e6e6;
    content: '';
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100px;
    -webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
       -moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
            box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
.corners:after {
    left: -50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
.corners:before {
    right: -50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);

More robust example including bottom corners at the Reference URL.

Reference URL


  1. Rudy Azhar
    Permalink to comment#

    Wow, that awesome tricks..

  2. Harry Spencer
    Permalink to comment#

    This is great I’ll be putting this to use soon. Thanks a million!

  3. Esther
    Permalink to comment#

    Will this work in Microsoft Internet Explorer 8/7 ?

  4. Michael Rose
    Permalink to comment#

    It works just fine in IE 9.0.3 on Vista Ultimate x64 SP2 w/ 12 GB RAM.

    This is very nice styling…

  5. Larry
    Permalink to comment#

    Sorry, Newbie here! (yes, but we all started somewhere!).

    Just so I understand, I opened Fiddle (very awesome) and if I understand this correctly, I paste in my .css code to my .css and then put in my .html code into my page. Correct?

    If yes, nothing works. What could I be doing wrong?


    • _John_
      Permalink to comment#

      JSFiddle? Paste the css into the portion than says ‘css’ (top right by default) and for your html portion into ‘html’ (top left by default). Once your code is in just hit run and your good to go. If you go to you can add in code and see your results in real time, as long as your syntax is correct.

  6. Zach
    Permalink to comment#

    Hey Guys!

    I was just curious how would you make it so the same class would put the tucks on the bottom?
    Or do you need to split it to two divs?

  7. Jules @garden to go
    Permalink to comment#

    After using this code, Its actually easier then u think to apply the rounded corner effect to css divs and make the overall appearance of the website look really good.

  8. Tyler
    Permalink to comment#

    I thought I could at least do my part – I also added some padding because the content was covered.

    JSFiddle Example

  9. вaкa тєиѕai
    Permalink to comment#

    Thanks alot , but for the content you need to put the content into another div and apply some selectors to make some margin in order not to make the content appear under the tucked corner . It still an amazing idea , Thanks alot Chris :D

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed