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:

.box{
    width: 190px;
    height: 90px;
    display: inline-block;
    padding: 5px;
    margin: 50px;
}

#box4sides{
    -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: http://jsfiddle.net/7dpUA/2/

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 : http://jsfiddle.net/7dpUA/22/

Is this what you need?


    CSS Howto..

    Print CSS: How do I open a new tab of the current page and append CSS?

    how to move image vertically with css [closed]

    How do I apply css to second level menu items?

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How to display a 100% width stripe in a CSS design using a fixed-grid blueprint?

    How to keep text aligned with the middle of a textarea?

    How to make a line in a table with CSS

    Navigation bar - How to keep the page highlighted when selected?

    How to put banner in css?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    how to change element css class runtime using javascript

    html-css-how to make opeanable vertical menu [closed]

    How can Shake FilePatterns be used to minify JS and CSS files?

    How to use images for check boxes using CSS or may be Javascript?

    How to decode data:image/png:base64… to a real image using javascript

    How to make element slide down from display:none?

    How does one override the JQuery UI styles?

    How to give a nested HTML table cell a transparent background?

    How to make rotating shape look thick?

    How to place an icon on the first line and text on the second line?

    How make contents as a grid in a ScrollPanel in GWT project using UIBinder

    how to make form input in middle

    How i change the dataTables_filter css class

    How to change custom Check Box border with Dart

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    How to specify a flex item to be of certain minimum width?

    How to place circle and text in one line?

    How to make a bullet of an image slider look different while is active?

    how to make observable a css class with knockout js

    How to override default “text” cursor on mousedown, mousemove?