my div is out from border-radius

Question

Here is my problem:

I have a <h1> inside <div> but when I set a border-radius in <div> the <h1> is out from the div, here is my code:

<div class="test"><h1 class="text">test</h1></div>

.test{
    background: red;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    display: inline-block;
    position: relative;
}
.test .text{
    display: inline-block;
    background: green;
    margin: auto;
    position: relative;
}

and this is live run

http://jsfiddle.net/n3aru/

Answer 1

Your text is actually not outside your div:

The visuality has just changed, not the structure.

You may want to position your text to the center:

.test{
    background: red;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    display: inline-block;
    position: relative;

    text-align: center;
}

.test .text{
    display: inline-block;
    background: green;
    margin: auto;
    position: relative;

    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

jsFiddle

Centering trick: http://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

.test{
    overflow: hidden;
}

Answer 3

Set the margin of the inner div. Something like this:

margin-top:50px;
margin-left:50px;

Answer 4

A much more concise way to center that text (if that's what you're after):

.test .text
{
    margin: 0; /* Only need this because h1 elements have default margin. */
    text-align: center;
    line-height: 300px;
}

jsFiddle (taken from @nkmol as a base).