Clever Geek Handbook

Resetting CSS borders with dark colors

I have a box with content border-radius

, then I have an element inside a container that also has a set border-radius

and it is leaning against the edges of the window.

Contains a field "bleeds" around the edges of the indoor unit:

enter image description here

You can see it in action here: http://jsfiddle.net/Shpigford/RUAMx/

How can I fix this?

+3


source to share


2 answers


Easy to fix setting larger radius for container border:

div {
    background:white;
    border-radius: 5px 8px 8px 5px;
}


See here http://jsfiddle.net/RUAMx/2/

Also, you no longer need to use the -webkit and -moz prefix, the border-radius support is good enough .

+5


source


one solution just moves the anchor tag a bit, like http://jsfiddle.net/RUAMx/3/

a {
    color:white;
    float:right;
    display:block;
    background:#201f23;
    padding:10px 20px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-right: -5px;
}


and to compensate for that -5px on the anchor use 5px for the container div

div {
    background:white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-right: 5px;
}
0


source






More articles:


All Articles