Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Hi,

    I've just gotten back into web design and I see a lot of designs favor rounded edges. I'd like to implement them too, but I'm not sure which would be the most time/usage-efficient method. Here's what I've found so far:

    1. Sliding Doors method
    Uses big right side image as div background (big so it can text enlargements will cause div expansion and reveal more of img), and sliver on the left side as overlaying background-img.

    Cons: limited in color, so usually best for navigation buttons, otherwise must make set for every different style/color.

    2. Table + 4 corners
    3 rows, 3 colums, corner pictures sit in corner. Really simple.

    Cons: A lot of img tagging everytime you make this table. And must make multiple sets.

    3. -moz-border-radius / border-radius
    Something I found today: a simple code that when both are included in css code, make for a simple edging for divs. This almost seems too easy?

    Cons: IE compatibility? Does not work for tables?

    Any thoughts on this? I've been looking around and there's plenty of methods, but never an article discussing the different methods and their pros/cons.

  2.  

  3. #2
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    Did you ever get this figured out? I'm working on the same type of thing. Getting very frustrated with IE. I have it working great with all other browsers.

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Wow, old post!

    Honestly, I just accepted the situation after analyzing the cost-benefit:

    1. Border-Radius is king. Works on everyone except <IE9. Only 10 seconds of typing. Rounded edges for tables takes a lot more code though.

    2. Sliding Doors and corner images are okay, but time consuming. Compare 10 seconds for border-radius to at least a 1/2 hour for this method. Even worse: if you change your color scheme, you have to remake your images. Also, if you want a variety of colors, you'll have to make a variety of images. Lastly, you have to decide on the angle of edge curve. NOT WORTH IT.

    In summary, it's either border-radius or nothing. Yes, things won't look as good in <IE9, but if we're going to dump time into IE fixes, it should be for critical things, not round corners.

    There's nothing wrong with square edges. You can find other techniques to dress up with: box-shadow, 2-tone borders, gradients, etc.

    -R

  5. #4
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    Here's what mine look like. Am I missing anything?

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -o-border-top-left-radius: 10px;
    -o-border-top-right-radius: 10px;
    -ie-border-top-left-radius: 10px;
    -ie-border-top-right-radius: 10px;

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Go with border-radius. The only major browser that doesn't support them is LTE IE8 (which is currently about 15% of web users, and declining)

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,305
    Member #
    27566
    Liked
    181 times
    For rounded corners use http://css3pie.com/ Someone should pin it so everyone knows because this site is very useful.
    AlphaMare and Glenn like this.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  8. #7
    Senior Member
    Join Date
    Aug 2011
    Posts
    228
    Member #
    29153
    Liked
    4 times
    Quote Originally Posted by Andrew Yurlov, post: 233480
    For rounded corners use http://css3pie.com/ Someone should pin it so everyone knows because this site is very useful.
    I agree. It has been very helpful for me. I'll use it on all of my web sites now.

  9. #8
    Banned
    Join Date
    May 2011
    Location
    Fairfax, CA
    Posts
    2,036
    Member #
    28003
    Liked
    126 times
    I agree border-radius is the best,fastest, easiest, and most compatible method.
    IE8 and below suck, so no loss there... having square corners won't really break the site, so focus on making sure the main core of the website works fine on IE8 and below!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com