CODEWITHSUNDEEP
htmlcssrounded-corners
Josh M.
Josh M.

Reputation: 27791

Inner element should be trimmed by outer element border radius

See here: http://jsfiddle.net/QSp2W/5/

As you can see the inner h1 has a background color which overlaps the rounded corners of the containing div. This is sort of fixed if you set a smaller radius on the inner h1 but this is a hack. (Uncomment the commented CSS to see what I mean.)

Version 2 (23, really)

http://jsfiddle.net/QSp2W/23/ but I don't know how to apply the * selector to only direct children, not grandchildren.

Upvotes: 5

Views: 1453

Answers (4)

Jason Gennaro
Jason Gennaro

Reputation: 34855

The most direct way is to have the div h1 inherit from the div.

So border-radius: inherit; instead of setting a radius #.

http://jsfiddle.net/jasongennaro/QSp2W/10/

Upvotes: 0

yoel
yoel

Reputation: 409

you can do it this way http://jsfiddle.net/yuliantoadi/QSp2W/8/

Upvotes: 1

chrisfrancis27
chrisfrancis27

Reputation: 4536

Adding overflow: hidden to the containing div effectively gets the background to do what you want, but it seems to overwrite the border! So, not quite perfect... :)

Upvotes: 2

ngen
ngen

Reputation: 8966

I would give H1 and p the CSS properties instead of the div as below. You could create a class just for borders and apply them to the appropriate element.

http://jsfiddle.net/QSp2W/7/

CSS:

div h1
{
    padding: 2px;
    background-color: #ff0000;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Below gets it close but not quite. */
    /*border-radius: 7px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
}

div p
{
    padding: 10px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

This is with separate border class: http://jsfiddle.net/QSp2W/9/

Upvotes: 1

Related Questions