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

    How does CSS height get applied to input fields?

    How to make rounded corner cut-out using CSS?

    How to give footer background color for the whole width of the browser with fixed parent div

    How to select label for=“email” in CSS?

    css how to make text align bottom?

    How do i check if a link has been visited?

    Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

    how to make textarea looks like input[text] on form invalid

    How to add new value to current css value [closed]

    how can I use the CSS selector to solve this [duplicate]

    How to use bootstrap css tables to display data from MySQL tables?

    How to call JavaScript on change of CSS

    How to declare CSS font-face with font-weight and font-style properly?

    Show Div When Click Link Button

    How do I remove a CSS class from a jqGrid cell?

    How to add CSS class to CQ dialog box

    How can I use Rspec to check for the absence of certain CSS classes?

    How would I go about editing the polar clock counter clockwise?

    How to test for css properties like modernizr.js

    How to use jQueryUI tootip along with my custom css

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    How to fully stretch 2 embeded divs?

    How can i style textnodes that are direct children of a body-element?

    How to create a vertical linear gradient for a GTK separator

    How do I use a gradient as a font color in CSS?

    How is Bootstrap's `nav` class making anchors move to their own line

    How to apply css style for HTML element using Mootools

    How to exclude the container from this javascript code?

    How do I inline the :before element when unable to include a CSS/style section?

    How to make the height of the div take all the space?