rounded corners without images

Discussion in 'HTML' started by aaron.reese@tiscali.co.uk, Jul 9, 2006.

  1. Guest

    Guys,

    I am trying to add rounded corners to my CSS containers (some of which
    are still tables - BOO!!!!)

    I dont want to use images becuase I need to update the both the
    foreground and background colours on a regular basis and as you know,
    only one colour of a gif can be transparent so either the foreground or
    background colour will be wrong...

    I am using php as a server side scripting language and was thinking of
    using <HR> in a loop and using Sine and Cosine calculations to
    determine the length of the <HR>.

    E.g.

    I have a table 100 px wide and want a curve with a radius of 10 on each
    corner. This means that the first <HR> needs to be the same width as
    the table (100px) and the 20th <HR> needs to be 120px (10px overlap on
    each end). The length of the intermeidate <HR>s is determined using
    algebra based on how far round the curve you are.

    The problem is that <HR> seems to leave white space around the element
    even when you set border, padding and margin to be zero. Does anyone
    have any ideas??

    Obiron
    , Jul 9, 2006
    #1
    1. Advertising

  2. wrote:
    > Guys,
    >
    > I am trying to add rounded corners to my CSS containers (some of which
    > are still tables - BOO!!!!)

    Rounded corners in CSS works only in Netscape and Mozilla, perhaps also
    in Opera. With the following example:
    -moz-border-radius: 1em;
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Edwin's persoonlijke web site
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info, issociate.de, velocityreviews, umailcampaign.com,
    gthelp.com, webfrustration.com, excip.com and many other to duplicate
    this post.
    Edwin van der Vaart, Jul 9, 2006
    #2
    1. Advertising

  3. Toby Inkster Guest

    aaron.reese wrote:

    > I dont want to use images


    The CSS(3) way is "border-radius", but I don't think any browsers fully
    support it yet; Mozilla has an experimental implementation, but you need
    to use "-moz-border-radius".

    There is an HTC hack for Internet Explorer. It's not standards-compliant
    of course, but as long as you include the standards-compliant equivalent,
    it shouldn't do too much harm.

    http://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html

    That page should show you everything you need to know. It's in Japanese,
    but the code samples should be usable, and you should be able to download
    "round.htc" for the IE-stuff.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jul 9, 2006
    #3
  4. Guest

    Edwin van der Vaart wrote:

    "Rounded corners in CSS works only in Netscape and Mozilla, perhaps
    also
    in Opera"


    Yes, I know and I want this to be browser independant because
    unfortunatley most people still use IE.

    I want to write straight HTML, proably without CSS that looks like this

    <HR width = 100>
    <HR width = 104>
    <HR width = 107>
    <HR width = 110>
    <HR width = 112>
    <HR width = 113>
    <HR width = 114>

    so that the edge looks like this (HRs centered); each dash representing
    a pixel

    -----
    ----------
    --------------
    ----------------
    -----------------
    -----------------


    So that the end is curved.

    The problem is that I can't get two HRs to sit next to each other
    without any white space.

    I am prepared to use any in-line tag such as tables or divs but I think
    HRs would be easier if I can get them to work.

    Tables would require creating a table 120 cells wide and then using
    colspan on each row which is produces messy code; and again I am
    struggling to eliminate white space between cells and rows.

    Obiron
    , Jul 9, 2006
    #4
  5. Guest

    OK, Got it.

    I've not seen it done anywhere and this is a bit of a rough
    implementation:-

    You need to get your server side script to generate code that looks
    like the following:-

    <div
    style='font-size:20px;overflow:hidden;height:1px;width:100px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:105px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:109px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:112px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:3px;width:114px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:4px;width:115px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:3px;width:115px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:114px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:112px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:109px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:2px;width:105px;border:solid
    0px;background-color: #00ffff'>text</div>
    <div
    style='font-size:20px;overflow:hidden;height:1px;width:100px;border:solid
    0px;background-color: #00ffff'>text</div>


    Note that on the height and length change on some of the divs. This
    example gives a rounded end to the colour block (a bit blocky but that
    should be possible to fix with some neat anti-alais code to fade the
    foreground to the background)

    The size and position would need to be generated from some calcuations.

    I've not seen this solution mentioned anywhere else. What is the
    problem with it in other browsers? (i use a Slimbrowser, built on IE so
    have not tried it in Mox, Fox, Opera etc.)

    Obiron
    , Jul 9, 2006
    #5
  6. Martin Jay Guest

    In message <>,
    writes

    >I am trying to add rounded corners to my CSS containers (some of which
    >are still tables - BOO!!!!)
    >
    >I dont want to use images becuase I need to update the both the
    >foreground and background colours on a regular basis and as you know,
    >only one colour of a gif can be transparent so either the foreground or
    >background colour will be wrong...


    "Nifty Corners" provides rounded corners without using any images. I
    haven't explored the disadvantages of using this method, though. See:
    <http://www.html.it/articoli/nifty/index.html>

    >I am using php as a server side scripting language and was thinking of
    >using <HR> in a loop and using Sine and Cosine calculations to
    >determine the length of the <HR>.


    Well, if you're using server side scripting you could make the rounded
    corners on he hoof. One way is to create a large circle and reduce it
    to the desired size - this will give you nice anti-aliasing. Then chop
    the circle into quarters and you have your corners.
    --
    Martin Jay
    Phone/SMS: +44 7740 191877
    Fax: +44 870 915 2124
    Martin Jay, Jul 9, 2006
    #6
  7. Toby Inkster Guest

    aaron.reese wrote:

    > You need to get your server side script to generate code that looks
    > like the following:-
    > [snip]


    This is a really horrible idea.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jul 10, 2006
    #7
  8. Guest

    Toby Inkster wrote:

    > This is a really horrible idea.



    Why?, It seems to me to be quite an elegant solution.

    It works without images so is not color dependant, is scalable, can be
    contained inside another container div to precisely place it on the
    page, does not require javascript which some users turn off, and as it
    only uses CSS2 tags it should be browser independant. I agree that
    writing in-line style sheets is not great, but you could farm quite a
    lot of the setting to a REL style sheet and simply override the width
    element in-line

    I am going to write a PHP function and post it here (and cross post on
    PHP boards - I know... but I need the feedback from them and they won't
    see it here)

    It will take the following arguments:-

    divwidth - The width of the element to be contained
    xradius - the length of the radius on the X- axis
    yradius - the length of the radius on the Y-axis
    fgcolor - the colour of the border
    bgcolor - the colour of the background

    I will then do the following:-

    work out the difference between xradius and yradius and divide by
    yradius to give me the radius-step.

    then loop for yradius to 1

    using pythagous theorem, I will calculate the length of the line to
    fill the radius on the x axis.

    X^2 * Y^2 = Z^2

    I know Y becuase it is the loop counter, decreasing one pixel for each
    line.

    I know Z because it is yaxis + ((yaxis - loopcounter) * radius-step)

    so I can calculate X. I have not worked out the anti-alaising yet.

    end loop

    I will then add 2 * the loop result to the divwidth and create a div
    of this width

    I suspect it will look dodgy with radius curves of less than 20px but
    we will give it a go. I will post the whole function when it is
    finnished.


    If you wanted to try to keep layout separate from content, the
    parameters for the function could always be included in an include file
    which would allow you to set up different 'classes' of rounded corners


    obiron
    , Jul 10, 2006
    #8
  9. Rik Guest

    wrote:
    > If you wanted to try to keep layout separate from content....


    Yes indeed.
    What are al those <hr>'s doing? They have nothing to do with the content.
    That's the bit people fall over. <hr> is already highly dubious when talking
    about semantic meaning, and now you're flooding your HTML with it...

    Grtz,
    --
    Rik Wasmus
    Rik, Jul 10, 2006
    #9
  10. wrote:
    > Yes, I know and I want this to be browser independant because
    > unfortunatley most people still use IE.


    Why dos it have to be unfortuanatally?
    Travis Newbury, Jul 10, 2006
    #10
  11. Guest

    Rik wrote:

    > Yes indeed.
    > What are al those <hr>'s doing? They have nothing to do with the content.
    > That's the bit people fall over. <hr> is already highly dubious when talking
    > about semantic meaning, and now you're flooding your HTML with it...


    The HRs were to be used to create lines of different lengths that when
    placed together look like a curve. Incidentally I am only interested
    at the moment in rounded corners on boxes, not on creating outlines
    which this method would not be so great for.

    I've given up on the HRs and using DIVS instead which makes a bit more
    sense but still makes for heavy reading in the HTML.


    Of course you could do it the other way round, put a square border
    round the container you want and then use DIVS to blank out the corners
    but I think that may prove to be just as unreadable

    I've actually just picked up a CSS book in town which suggested doing
    just this but with defined styles rather than creating HTML server side
    but the end solution was the same but without the flexibility.

    Obiron
    , Jul 10, 2006
    #11
  12. Toby Inkster Guest

    aaron.reese wrote:
    > Toby Inkster wrote:
    >
    >> This is a really horrible idea.

    >
    > Why?, It seems to me to be quite an elegant solution.


    It's as elegant as a pile of poo. Consider how it looks in a non-CSS
    browser. Consider how it sounds in a screen reader (clue: "text text text
    text text text...") and what Google will see.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jul 11, 2006
    #12
  13. Guest

    Toby Inkster wrote:
    > aaron.reese wrote:
    > > Toby Inkster wrote:
    > >
    > >> This is a really horrible idea.

    > >
    > > Why?, It seems to me to be quite an elegant solution.

    >
    > It's as elegant as a pile of poo. Consider how it looks in a non-CSS
    > browser. Consider how it sounds in a screen reader (clue: "text text text
    > text text text...") and what Google will see.


    OK, do a browser check and only output the rounded corners if we are
    using a CSS compatible browser.

    How does Google track and rank pages generated from include files and
    database queries anyway??
    , Jul 12, 2006
    #13
  14. Toby Inkster Guest

    aaron.reese wrote:

    > OK, do a browser check and only output the rounded corners if we are
    > using a CSS compatible browser.


    Which can't (reliably) be done.

    > How does Google track and rank pages generated from include files and
    > database queries anyway??


    How can Google tell whether or not a page is generated from an include
    file or database query? (Hint: it can't.)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Jul 13, 2006
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Konrad

    rounded corners in data grid

    Konrad, Aug 30, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    817
    Ken Schaefer
    Aug 30, 2003
  2. Francisco J. Jurado

    Rounded corners in menu Table and Bottons

    Francisco J. Jurado, May 31, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    598
    John Timney \(Microsoft MVP\)
    May 31, 2004
  3. kurt sune

    Rounded corners on panel/div etc

    kurt sune, Oct 12, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    5,993
  4. Mark Rae

    Rounded corners

    Mark Rae, Jan 20, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    2,617
    mkrawats
    Sep 24, 2009
  5. Alan
    Replies:
    4
    Views:
    514
    Whitecrest
    Nov 10, 2003
Loading...

Share This Page