/    Sign up×
Community /Pin to ProfileBookmark

Rounded Corners for div

Copy linkTweet thisAlerts:
Jan 23.2005

How can one achieve the effect of having rounded corners for divs, similar to the dark blue header area of the [url]http://www.mozilla.org/[/url] site.

I have had a look at the css and html and it seems that to achieve this styling an image is used as background

[url]http://www.mozilla.org/header_bl.png[/url]

and that the header div is then styled using the the following CSS:

#header {
background: #455372 url(“../../images/header_bl.png”) bottom left repeat-x;
position: relative;
min-height: 39px;
height: 5em;
padding: 0;
voice-family: “”}””;
voice-family: inherit;
height: 3em;
padding: 15px 0;
}

I guess the relevant part is:

background: #455372 url(“../../images/header_bl.png”) bottom left repeat-x;
position: relative;

I have tried to copy this but am having problems. I cannot get the rounded corners to be repeated on the top left, top right and bottom right corners. As far as I can work out, there must obviously be something else at play that I am missing.

As you can probably guess, I have a basic knowledge of CSS and would like to learn how to achieve this effect. Any explanations or pointers to sites that can explain how this is done would be very gratefully accepted.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Daniel_TJan 23.2005 — http://www.mozilla.org/images/header_bl.png

That is the image you were looking for. The rounded corners can be achieved by one of three ways:
[list=1]
  • [*]Put rounded corners in the background image. This way is probably best, and most universally compliant.

  • [*]Use an overlying DIV with a transparent GIF. If you can make a transparent GIF with the rounded shape and place it over top of the background image, it will give the impression of a rounded corner. This is the second-best way to do it.

  • [*]And finally, there's the easier, but Mozilla-proprietary way: [url=http://www.webreference.com/dhtml/column70/3.html]-moz-border-radius[/url]

    [/list=1]
    • Copy linkTweet thisAlerts:
    @wastlingerauthorJan 23.2005 — I am trying to work out how this effect is achieved on the mozilla site. The image:

    http://www.mozilla.org/images/header_bl.png

    has a rounded corner bottom left and somehow this is used for all the corners. I would just like to know how this specific example actually works and which part of the css styling does what.

    I tried using:

    background: #455372 url("../../images/header_bl.png") bottom left repeat-x;

    position: relative;

    to repeat this but it does not seem to work, so I guess there must be something else involved.
    Copy linkTweet thisAlerts:
    @Daniel_TJan 23.2005 — The way Mozilla does it involves four images:

    http://www.mozilla.org/images/header_bl.png

    http://www.mozilla.org/images/header_tl.gif

    http://www.mozilla.org/images/header_tr.gif

    http://www.mozilla.org/images/header_br.gif

    And bottom right, top right, and top left corners are all transparent GIF's that cover up a portion of the corner of the header_bl.png image.

    Now, without diving into the stylesheets, I imagine they use the corner images as backgrounds for 4 different block-level elements that are positioned in the top left, top right, and bottom right corners of the header.
    Copy linkTweet thisAlerts:
    @wastlingerauthorJan 23.2005 — Thanks. Worked it out. One thing I am not quite sure about though are your methods 1 and 2. I guess the mozilla site uses method1 and this is the best method to achieve this effect (for IE compliance) or is there a better way?

    Thanks again for your help.
    Copy linkTweet thisAlerts:
    @Daniel_TJan 23.2005 — Well, since they are using an elastic layout (one that resizes with the text) the width of the header image does not have a set value in pixels.

    Method #1 that I described involved having the rounded corners in the background image itself, which would of course be problematic on the Mozilla site if someone resized the text.

    Mozilla uses Method #2 of rounded corners, which involves using small transparent GIF's to only show a rounded portion of the background image.

    The reason that Mozilla did not use Method #3 is because it would ONLY work in Mozilla-based browsers (Mozilla and Firefox).
    ×

    Success!

    Help @wastlinger spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...