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 to align this CSS menu to the right of its containing div?

    How to fade multiple background colors after few seconds? [duplicate]

    How to create a set of css rules for safari

    How do I get text to overlay on top of an image in Dreamweaver?

    How to get css values in IE7 when “auto” is returned

    How to hide and show a separate div with CSS

    Show Div When Click Link Button

    How to select a .list-cell, in javaFX CSS

    How to implement vertical tables using html5/CSS

    How To Make Two Container Heights Match?

    Image div showing in Safari, Chrome and IE but not in Firefox

    How to use :hover for one element and chnage another class css proprties

    How can I use :hover with multiple classes

    How do I refer to an image resource from CSS in grails?

    How do I evenly distribute a group of spans across a div?

    How to center an img inside a div

    How to get background image/ image to stretch to fill container via CSS?

    How to debug HTML5/CSS for background video in RoR app

    How to give border to any element using css without adding border-width to the whole width of element?

    How to prevent one table from obeying CSS rule

    how do i allign my div containers using css

    how to fix a display difference between chrome and firefox for css relative position?

    How can I make an image continue across multiple sections with breaks in between?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    jquery carousel how to have a gradient on start and ending slides

    Homepage build - How to use CSS more efficiency?

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to rotate an element and correctly position it with CSS or jQuery

    How to override Liferay core' css?

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails