Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Tucked Corners

<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. Wow, that awesome tricks..

  2. 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. 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. 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>