CODEWITHSUNDEEP
htmlcss
Zulu Irminger
Zulu Irminger

Reputation: 442

Border Radius only rounding the top of my divs?

I've been using the new CSS border-radius function for a while now, but I'm stumped today! I have a background image (120px x 60px) and have set a border radius of 5px, but it's only rounding the top two corners?!

The CSS code I'm using is here:

#buttonRow {
    position:relative;
    width:980px;
    height:60px;
    margin-left:51px;
    margin-bottom:25px;
    float:left;
}

#button {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:10px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#singleLineButton {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:20px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#buttonText {
    width:120px;
    height:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-family: Adobe Kaiti Std R;
}

And the output is this:

Rounded Divs

Why is it only showing the top corners as rounded?!

Any help would be greatly appreciated!

Thanks, Zulu

EDIT

Here is the HTML for those asking:

<div id="buttonRow">
    <a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
        <div id="button"><div id="buttonText">Individual Table Management</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
        <div id="singleLineButton"><div id="buttonText">Attendance</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
        <div id="singleLineButton"><div id="buttonText">School Members</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
        <div id="singleLineButton"><div id="buttonText">Search</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
        <div id="singleLineButton"><div id="buttonText">School Details</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
        <div id="singleLineButton"><div id="buttonText">Users</div></div>
    </a>
</div>

Upvotes: 4

Views: 7238

Answers (6)

Cathryn Clark
Cathryn Clark

Reputation: 1

Try using margin-top instead of padding top, I've had this issue recently and that seemed to fix it.

Upvotes: 0

Piyush Teraiya
Piyush Teraiya

Reputation: 745

You can use this code

#buttonRow {
    width: 1170px;
    margin: 0 auto;
    display: block;
}
#button {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:10px;
    border-radius: 5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
    background: red;
}
#singleLineButton {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:20px;
    border-radius: 5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
    background: red;
}
#buttonText {
    width:120px;
    height:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-family: Adobe Kaiti Std R;
}

<div id="buttonRow">
    <a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
        <div id="button"><div id="buttonText">Individual Table Management</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
        <div id="singleLineButton"><div id="buttonText">Attendance</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
        <div id="singleLineButton"><div id="buttonText">School Members</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
        <div id="singleLineButton"><div id="buttonText">Search</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
        <div id="singleLineButton"><div id="buttonText">School Details</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
        <div id="singleLineButton"><div id="buttonText">Users</div></div>
    </a>
</div>

Upvotes: 0

The Walrus469
The Walrus469

Reputation: 143

As previously answered, your image isn't large enough. Your div is 120x60px to match your image, but you have a padding-top of 10px, which extends the size of the div to 120x70px total--too large to show the rounding. Either change the size of your background image or resize the div to 50px tall--with padding, it'll end up at the proper size.

Upvotes: 2

Code Maverick
Code Maverick

Reputation: 20425

It might be that your image isn't long enough and thus you don't see the rounded corners on the bottom. I ran into that today, actually.

I simply set a background color and it showed me what the issue was. So, just modify your CSS to:

background-image: #00ff00 url('../assets/buttons/generic_button.png');

or:

background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');

That will at least tell you if your image covers the whole area or not and you will know what to do from there.

Upvotes: 4

Buzzwilder
Buzzwilder

Reputation: 39

In CSS3 it's done like this:

border-top-right-radius: 8px;
border-top-left-radius: 8px

Upvotes: 2

kmiyashiro
kmiyashiro

Reputation: 2249

Most likely the bottoms are getting cut off from overflow. Make sure the containing element is tall enough to accomodate the heights of these or set the all the ancestor's overflow to overflow: visible.

Also, use jsfiddle.net to post live examples instead of just the CSS in a vacuum. CSS requires context.

Upvotes: 1

Related Questions