CSS Border Overlapped By Child Element

Question

See here:

http://jsfiddle.net/cnJ6q/

I can't just add the border to the child element, it needs to be added to the parent (.dc-slick) - Is there any way to fix this? Z-index does not seem to help.

Thanks.

Answer 1

There are 2 ways of doing it. 1) Child element takes the same size as not-transformed parent element. Then background you should cast on parent element

.dc-slick {

    border: 3px solid red;
    right: 0px; 
    left: 0px; 
    position: fixed;
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px;
    background: black;
}

.dc-slick-content {

    color:white;
    z-index:9999;
    width: 100%;
    height: 200px; 
    border-bottom-left-radius: 15px 15px; 
    border-bottom-right-radius: 15px 15px;
}

2) You should scale child approximately in same way as parent.

.dc-slick {

border: 3px solid red;
    right: 0px; 
    left: 0px; 
    position: fixed;
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px;

}

.dc-slick-content {

    background: black;
    color:white;
    z-index:9999;
    width: 100%;
    height: 200px; 
    border-bottom-left-radius: 28px 28px; 
    border-bottom-right-radius: 28px 28px;
}