How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?


I want my box to look like this except for the left side to be blank:

    width: 190px;
    height: 90px;
    display: inline-block;
    padding: 5px;
    margin: 50px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 1px 1px #dbdbdb;
    -webkit-box-shadow: 0 0 1px 1px #DBDBDB;
    box-shadow: 0 0 1px 1px #DBDBDB;
    background: white;
    border: 1px solid #CDCDCC;

Here is my best attempt:

I found other examples of 3-sided boxes, but they were with either the top or bottom removed, and I haven't been able to translate that to my case.

Problem courtesy of: Ryan


Create a wrapper div around the box with overflow as hidden and give a negative margin for the #box4sides div.

Check this jsFiddle :

Is this what you need?

Solution courtesy of: BlackCursor


My recommendation is to remove the class shadow from your 3 sided box and add this bit of css on your 3-sided box.

box-shadow: 1px 1px 1px 0 #DBDBDB, 1px -1px 1px 0 #DBDBDB;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

Explanation of the box-shadow property:
box-shadow: 1 2 3 4 color;

  1. Horizontal Offset - Positive values move the shadow right, negatives left.
  2. Vertical Offset - Positive values move the shadow down, negatives up.
  3. Blur Radius - The larger the value, the blurrier it is.
  4. Spread Distance - Positive values expand the shadow, negatives contract.

Color is pretty self-explanatory. Here is your jsFiddle edited to show what you want.

As far as the shadow is concerned, you don't need position: relative; anymore either.

Discussion courtesy of: Aust

Is this what you're looking for? I exaggerated the borders and such for emphasis and increased the first argument on the shadow element to throw it to the right a bit, avoiding a "false border" effect.

Discussion courtesy of: Forty-Two

This recipe can be found in it's original form on Stack Over Flow.