Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS rounded corners: The best method?

Featured Replies

Well, in this case Google is not my friend. The searches contradict, and many are outdated, and I surface from them only feeling slightly more bemused than before. I thought four corner images were the go, until something else said it was a circle, and something else said you do it with heaps of <b> tags- which I find cluttered- and something else said "stuff all the other browsers! Just use border-radius and let the others see in squares!"

Well, obviously I'm not going to take the latter option, but seriously, what do I do? I feel like waving a white flag to all these browsers and telling them to AGREE!

So, my question boils down to this:

 

"What is the best way of doing CSS rounded corners? OR should I just forget it and go with boxes?"

 

Thanks in advance, I appreciate it. ^_^

Read this thread with lots of advice:-

http://www.webdesignerforum.co.uk/topic/23718-rounded-corners/page__p__164280__hl__rounded%20corners__fromsearch__1entry164280

 

Using CSS3 styles -moz-border-radius: 10px; and -webkit-border-radius: 10px; is the easiest but Opera, IE and other browsers used on Macs won't process it yet, so then Javascript http://www.curvycorners.net/ seems to be the next favorit but that needs javascript/ActiveX enabled, so the two or four image method is the one for all browsers but uses a lot of code.

I use the CSS3 features to rounded corners. On older browsers they degrade nicely to square corners. Before that used to bother me, that not every user would see the site similar, but now I reather let the nice degrade gracefully, the users doesn't really care about rounded vs square. It's just my obsessive mind.

  • Author

Thanks for that, I'll definitely go with the CSS3 choice. It saves so much stuffing around, and I really don't like having to add extra bits of code in where I feel they're not necessary. And anyway, while it may be nice to have rounded corners, squre ones look just fine as well. ^_^

I use a method outlined in dan cederholm's bulletproof web design

 

tbh I'm starting to feel rounded corners are getting overdone a bit its a bit like when I discovered bevel/emboss in Photoshop everythig I did for 6 months afer was bevelled or embossed :nea:

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.