Geek Answers Handbook

The inner element must be trimmed with the radius of the border of the outer element

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

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

Version 2 (23, really)

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

+4
source share
4 answers

I would give H1 and p CSS properties instead of div, as shown below. You can create a class only for borders and apply them to the corresponding 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 a separate border class: http://jsfiddle.net/QSp2W/9/

+1
source

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

+1
source

you can do it as follows http://jsfiddle.net/yuliantoadi/QSp2W/8/

+1
source

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

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

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

0
source

More articles:


All Articles