Issues with CSS Rounded Corners

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
LiveFree
Forum Contributor
Posts: 258
Joined: Tue Dec 06, 2005 5:34 pm
Location: W-Town

Issues with CSS Rounded Corners

Post by LiveFree »

Hello,

I've been following the tutorial at: http://www.webcredible.co.uk/user-frien ... ders.shtml On how to create a border with curved corners. I followed the 'final product' code exactly, but instead of getting the example they provided as 'what it should look like', I instead get the 2nd example (in the tutorial, the 2nd example is the one that shows both the corners and the straight sections not smoothly connected).

My code looks just like theirs:

Code: Select all

 
<div class="t">
    <div class="b">
    <div class="l">
    <div class="r">
    <div class="bl">
    <div class="br">
    <div class="tl">
    <div class="tr">
        COOL BEANS!
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
 
And my css

Code: Select all

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px} 
 
Any someone has experience with creating curved corners, any and all help would be greatly appreciated.

Thank you
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Re: Issues with CSS Rounded Corners

Post by onion2k »

I realise this doesn't answer your question ... but 8 nested divs just for a graphical effect? That's horrible. I would give up on having rounded corners rather than use that.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Issues with CSS Rounded Corners

Post by jayshields »

Code: Select all

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em; border: 0}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
Maybe.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Issues with CSS Rounded Corners

Post by matthijs »

Rounded corners should not be that difficult.

First thing: is the box fixed-width, fixed-height, flex-width, flex-height?
Depending on the answer you need one or more elements to put your images on. Fixed-width and fixed-height is the simplest: you only need one element and image and one css code line. Fully flexible box would need at most 4 elements.

Second: what elements are there already? Most often, you already have 2 in place. The the element for the box (probably a div) and something in it (a p, a h2?). First use those elements to put the background images behind.

Third: is the rounded box not complete? Only then start thinking about adding another element.
User avatar
idevlin
Forum Commoner
Posts: 78
Joined: Tue Jun 26, 2007 1:10 pm
Location: Cambridge, UK

Re: Issues with CSS Rounded Corners

Post by idevlin »

User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Issues with CSS Rounded Corners

Post by kaszu »

To achieve same effect as described in first tutorial (except using only 1 sprite image) i use:

Code: Select all

<div class="somebox"><span class="lt"><!-- --></span><span class="rt"><!-- --></span>
  CONTENT HERE...
<span class="lb"><!-- --></span><span class="rb"><!-- --></div>
and CSS

Code: Select all

.somebox {
    display: relative; /* Without position relatively spans won't be at the corners of the box */
    border: 1px solid COLOR_HERE;
}
.somebox .lt, .somebox .rt, .somebox .lb, .somebox .rb {
    background: url(...image file with all 4 corner sprites inside...) left top no-repeat;  /* Background image */
    position: absolute; /* We position all corners absolute, so that they go to the corners */
    display: block; /* If you will use divs, not needed ofcourse */
    width: ...px; /* Width of the sprite image */
    height: ...px; /* Height of the sprite image */
}
/* Position all elements and their backgrounds */
.somebox .rt { left: -1px; top: -1px; } /* -1 because we have border */
.somebox .rt { background-position: right top; right: -1px; top: -1px; }
.somebox .rb { background-position: right bottom; right: -1px; bottom: -1px; }
.somebox .lb { background-position: left bottom; left: -1px; bottom: -1px; }
}
Maybe there was something specific for IE too, don't remember and unfortunately can't check at the moment.
Note: this of course doesn't work with semi transparent gifs and transparent PNGs
lailaigogo
Forum Newbie
Posts: 1
Joined: Thu Aug 14, 2008 1:19 am

management

Post by lailaigogo »

Verizon or AT&T. Instead of reflexion the accommodation doomed scheme, Blizzard erizon/AT&T and Minute Filmmaker Lineage2 adena to get their raw guys (the ones who actually do the creation and not this schmo who has a even in management at refined) and get their routers to graduation conversation to themselves the most underspent way realistic.
Post Reply