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

Tags: css,css3

Problem :

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.

Solution :

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?

    CSS Howto..

    How to make rounded tabs with css? [closed]

    How to call JavaScript on change of CSS

    How to add css to dynamic div Id

    How to override css-setting for the elements of nested table?

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How to style a table from horizontal layout to vertical layout with CSS

    How do I add a margin between bootstrap columns without wrapping

    css how to align a graphic on page

    how to prevent shifting when changing border width

    How is CSS linked to [closed]

    How can I place a checkbox within a button? [closed]

    How to put the hover image above the original image

    How to vertically align images inside a list

    How can a transformed Image transition back to it's original shape when hovered?

    How to let the user choose a page number?

    How to change css classes with a button click in javascript?

    sencha touch 2.0 : How to apply conditional background color to list item

    How to fit inner div inside an outer div

    How to make the page layout stay the same after minimized?

    How would I re-position my 2nd bg image “ url(repeat_bg_right_side.png) ” to the right side of page using css?

    How to use min-width for “float:right” element in CSS?

    How to do the right positioning of css elements?

    How to select span element inside multiple div classes and id's?

    how to move 2 divs on hover with css

    How to add the very last border on the sub menu items

    How to skew element but keep text normal (unskewed)

    How to tell the code to choose between two variables and make them equal?

    How to align logo and text in bootstrap on small screens?

    How to detect when CSS value has changed?

    How to override some CSS class settings