1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Rounded Corners

Discussion in 'CSS' started by Pudge1, Aug 17, 2009.

0
Page 1 of 2
  1. #1
    Can someone tell me the absolute best way to make rounded corners with CSS. (With or without images whichever is easier).
     
    Pudge1, Aug 17, 2009 IP
  2. Necrospasm

    Necrospasm Peon

    Messages:
    76
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    There was already a question about this a couple of posts down.

    Try : h**p://www.html.it/articoli/nifty/index.html
     
    Necrospasm, Aug 17, 2009 IP
  3. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #3
    I'm kind of lazy :p Is there a good generator out there somewhere?
     
    Pudge1, Aug 17, 2009 IP
  4. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #4
    [​IMG]
    Can someone write me up some CSS so that stretches with the content?
     
    Last edited: Aug 17, 2009
    Pudge1, Aug 17, 2009 IP
  5. ravigupta_86

    ravigupta_86 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>



    <style type="text/css">
    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #e8e8e8}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

    .rs1{margin: 0 2px}
    .rs2{margin: 0 1px}
    div.container{ margin: 0 10%;background: #e8e8e8}
    </style>


    </head>

    <body>



    <div class="container">
    <b class="rtop">
    <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
    </b>
    <h1 align="center">Hi! :)</h1>
    <p>your content here for large curves at corners.</p>
    <b class="rbottom">
    <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
    </b>
    </div>





    <br /><br />





    <div class="container">
    <b class="rtop">
    <b class="rs1"></b> <b class="rs2"></b>
    </b>
    <h1 align="center">Hi! :)</h1>
    <p>your content here for small curves at corners</p>
    <b class="rbottom">
    <b class="rs2"></b> <b class="rs1"></b>
    </b>
    </div>
    </body>
     
    ravigupta_86, Aug 17, 2009 IP
  6. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #6
    Will that do it with the same colors as the image above?
     
    Pudge1, Aug 18, 2009 IP
  7. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    jQuery has a much simpler technique to do this without having to use all the <b> tags.

    Google jQuery corners
     
    1 FineLine, Aug 19, 2009 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Because throwing javascript at a LAYOUT issue is SUCH a good idea. Christ, where do people come up with that faggotry?!?

    @pudge1 - try my 'eight corners under one roof' method. Lets you do what you are asking using just one image and a fraction the markup presented so far.
    http://battletech.hopto.org/html_tutorials/eightcorners/template.html
     
    Last edited: Aug 19, 2009
    deathshadow, Aug 19, 2009 IP
  9. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    works for me.
     
    Last edited: Aug 20, 2009
    1 FineLine, Aug 20, 2009 IP
  10. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I have no issues using a couple lines of jQuery JS to use in a layout for a rounded corner box since I use it for other items on a site AND on top of that it's less code than your markup.

    And you CANNOT navigate to ANY real site with JS turned off.

    Oh and BTW Einstein your brilliant code breaks in IE6. But we all know that's a faggotry browser that no one uses anymore right? And you have a link to a "javascripted border demo page."? Hmmm...

    Seriously dude you need to get laid and lighten up with the holier then thou attitude. Ever worked for Fortune 500 companies in Silicon Valley? Oh wait, you live in New Hampshire what a technological hot bed that is.

    You obviously know how to code but you definitely need some work in socializing.
     
    1 FineLine, Aug 20, 2009 IP
  11. LOD

    LOD Member

    Messages:
    319
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    35
    #11
    nice going dude...
     
    LOD, Aug 21, 2009 IP
  12. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #12
    Gah I am too lazy to read through that long ass article. I'll just use revigupta's idea thank you.
    EDIT: wtf That doesn't even use the image. Can someone else help me?
     
    Pudge1, Aug 24, 2009 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Ok, try these on for size, I took your image and used two variations of my 'eight corners' technique, though in this case it's only six corners since only the four edges and the top/bottom are in the image file. The big question is do you NEED transparency or not? transparency GREATLY limits what you can do with it for padding since the you won't be able to ride your content up over the heading/footer since it will screw up the side borders - which could be a deal breaker given how large your border radius is. Going without transparency opens the door up to use negative margins to address that issue. You could also in non-transparent do absolute positioned corner blocks, but that has it's own laundry-list of issues. Oh, is this going to be fixed or fluid width? I always code fluid but if you are working fixed width, this could be done without the extra nested DIV's.

    http://www.cutcodedown.com/for_others/pudge1/template.html

    Valid XHTML 1.0 Strict, tested working in IE 5.5, 6, 7 & 8, Opera 9.62 and 10 Beta 3, Safari and Chrome.

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/pudge1/

    is unlocked so you can grab the gooey bits... You'll notice I made two transparent .gif - I would advise against using alpha .png because the headaches of making them work just isn't worth the effort - especially on something like this where 'close enough' AA will usually do the job. Just render the alpha .png against the average background color it will be over, drop it to palettized and make that color the transparency. (I used white for this example).

    Revigupta's approach does not use images, it pulls border trickery which appears to be the old-school ugly version (with all those unneccessary classes). I came up with my own imageless approach described here:
    http://battletech.hopto.org/html_tutorials/rounded_css_borders/

    But really that's not what you were asking for, since I'm assuming that's a placeholder image and not your final? In any case a border radius that large would be WAY too much markup using the imageless approach.
     
    Last edited: Aug 24, 2009
    deathshadow, Aug 24, 2009 IP
  14. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #14
    Your code worked fine but then I put it on my site and in IE in made the pictures have a light blue background and it didn't have the curved edges or a border on the top or bottom just side borders. I am really having trouble with this. I used to know how to do this so easy...
     
    Pudge1, Aug 25, 2009 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Well, URL to your non-working copy, perhaps I can spy what's wrong.

    Usually broken images like you describe come from alpha transparency .png, which are pretty much made of fail... You 100% certain you are using the images I provided? If you made your own did they follow the format I used?

    What version of IE? Are you testing in something wierd like IE 5.2 Mac? (which I no longer code to support)
     
    deathshadow, Aug 25, 2009 IP
  16. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #16
    It is IE6 I believe. I have the files on my desktop. I am using all the images you made me. The only changes I made were adding my site banner to the top and adding some copyright information to the bottom.
     
    Pudge1, Aug 25, 2009 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Without seeing what you've done for code changes, I can't say why it works fine here in every IE I could throw at it. If your local copy doesn't work, but my online one does - then I'd assume it's some sort of change you made in the markup.

    In adding your header/footer did you do something silly like load it into some crap WYSIWYG like Dreamweaver or Frontpage? That will pretty much **** any code I write. (the empty DIV for the rounded top/bottom would be deleted outright for example)

    Just part of why I call dreamweaver a steaming pile of shit.
     
    deathshadow, Aug 26, 2009 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    <rant>
    I will call major bullshit on that. Lazy developers rely on Javascript to display the CONTENT of a web page, but real developers DON'T DO THIS.

    A web page must function without needing the crutch of scripts to show content. Content MUST be accessible regardless of user agent. Not all user agents allow scripting. "User agent" is not limited to "someone's new web browser on a new computer."

    HTML holds the content, whether served up by a server or static. Javascript can be a layer of sleazy glossy goodness to make that content look snazzier, act faster (by replacing repeated calls to the server), or whatever, but it is NOT content and they do not replace content (it can hide and show it tho).

    The only thing you can EVER guarantee a user agent can handle is HTML. You cannot guarantee CSS, or scripts, or images. In fact you cannot even guarantee the user agent can handle frames (googlebots are dumb enough to not figure out frames, they do not use Javascript and they do not use CSS, and they ARE valid visitors to any and every public website).

    Everything I said above does not apply to a web application but those are instances where you can require the client runs X. You sign up for online banking, your contract likely has in small print that you need Javajunk enabled for the service to work. But for a web page/document if you need scripts simply to view content then what you've built is called a broken website. Broken. FAIL. It's as dumb and evil as requiring CSS to get to the content.

    Of course if your content IS the bloated crap then of course the bloated crap is necessary (YouTube's content IS Flash therefore it makes no sense to go there without Flash, although they were smart enough to use Flash only for the Flash and have actual HTML for all the other crap like the info and the login and the user pages blah blah...).

    Using Javascript for retarded decoration like rounded corners though (which I don't consider "layout" but "decoration") doesn't matter. It just means the user is loading and caching some bloataceous-cetaceous javajunk instead of loading some bloataceous-cetaceous stylesheet and extra sandbag HTML elements (though the user is already loading HTML and CSS so you possibly added another GET request that wasn't needed, but pff). Both are bloat for the purposes of beautifying the content, but while I prefer to bloat my CSS sheets, it really doesn't matter which technique you use, other than there are currently more user agents who support CSS and have it enabled than Javascript. So jQuery's what, 15kb? That's a tiny image, comparable to corner images. Another reason I turn off scripts is no matter how lean the library, some fucktard has to have 15 references to 20 different scripts, and instead of wasting my time loading all that shit I can skip it and just get to the content because I selectively block Javajunk. But someone properly using jQuery for rounded corners isn't going to have a noticeable impact on most users.
    </rant>

    I surf with Javascript off by default, and have since NoScript. My boss has a Sony Erickson, not an old phone, and he cannot log into the service he PAYS for using his phone because they use client-side scripting instead of server-side scripting for the login. Oh wait, nobody surfs the innernets with mobile phones! Christ. How NOT to build a site.
     
    Last edited: Aug 26, 2009
    Stomme poes, Aug 26, 2009 IP
  19. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #19
    I don't use Dreamweaver or Frontpage. I may have deleted the empty divs though I'll check.
     
    Pudge1, Aug 26, 2009 IP
  20. Pudge1

    Pudge1 Well-Known Member

    Messages:
    912
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    140
    Digital Goods:
    1
    #20
    That was not the problem but I found the problem and fixed it. :D. However, I now have another problem. There is a white space between the corners and the box.
     
    Pudge1, Aug 26, 2009 IP
Page 1 of 2