CSS - rounded corners 1111 Responses

Last post: 1 year, 12 months ago | Thread started: Feb 8, 10, 6:25 p.m.

RespondNew TopicDisable Images

• raf

  What is your approach to rounded corners, ie like those post count bubbles here on quick links list menu on the left hand side have?
  ⬅

  CSS offers elegant and simple rounded corners for webkit (safari, chrome) and gecko (firefox) browsers. IE needs more work though.

  QBN uses a variation of sliding doors technique with opening and closing images
  

  

  

  It's ok, but can get tricky.

  There are plenty of JavaScript-based techniques. What's your preferred and safe method?

  Feb 8, 10, 6:25 p.m. – Permalink

• foobaz

  Go with CSS3 rounded corners.

  • and fuck IE?– raf1/3

    right in the ass.– fugged2/3

    be careful though. its FULL of shit.– iCanHasQBN3/3

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 6:40 p.m. – Permalink

• univers

  DD_Roundies, and depending on your html structure they most likely are a great solution even in IE6

  http://www.dillerdesign.com/expe…

  • Thanks, demo doesn't work in IE8 though.– raf1/4

    I have it work in IE8 and a ploy it on all of my teams sites.– univers2/4

    doesn't work in IE8 for me– BusterBoy3/4

    x-ua-compatible content="IE=7" ?– amullins4/4

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 6:45 p.m. – Permalink

• scarabin

  

  • pretty– scarabin

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 6:56 p.m. – Permalink

• amullins

  use css3 rounded corners + the browser specific rounded corners properties (ie. -moz-border-radius and -webkit-border-radius). ie will require a little vml work ( http://snook.ca/archives/html_an… ). jonathon snook's experiment as a jquery plugin http://plugins.jquery.com/projec… . dd_roundies will work if you use x-ua-compatible meta tag set to IE=7. Another jQuery plugin that makes use of vml http://www.parkerfox.co.uk/labs/… . Use of vml will require an xhtml doctype and new namespace for vml elements - as snook points out in his post.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 7:47 p.m. – Permalink

• falcadia

  http://woork.blogspot.com/2009/0…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 7:47 p.m. – Permalink

• fugged

  I've always used variations on the sliding doors technique and recently starting to use CSS3 more and more. If the rounded corners aren't critical to the design, then I say CSS and fuck IE.

  Personally not a big fan of JavaScript being used for rounding corners and the likes...

  • i use the sliding doors style thing also.– airey

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 8, 10, 8:22 p.m. – Permalink

• Stugoo

  Nah javascript is not an option for rounded corners to be honest.

  I came across this a while ago.
  http://dimox.net/cross-browser-b…
  Been using it since.
  well that is to say I dont use it all the time, I wont use it on inputs, or key layout elements but will for tertiary items whilst I still get into my comfort zone with it.

  • nice link, thx– lukus_W

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 9, 10, 1:48 a.m. – Permalink

• colourform

  CSS3 all the way for me. The hacks for IE only let it off the hook. By ignoring IE (square corners aint gonna kill usability) more and more people will realise the web looks better in modern browsers and make the switch.

  • +1 for css3, screw everything else– seeessess1/2

    CSS3, if they are using IE they wont give a shit what it looks like– BIGGESTDOGINTHEWORLD2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 9, 10, 1:57 a.m. – Permalink

• therapist

  easily done with CSS2 if your container has a fixed width or height. If it has a dynamic width in both dimensions then CSS3 and fall back to square. Agree with no JS for such things as rounded corners.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 9, 10, 2:26 a.m. – Permalink

• pillhead

  NiftyCube, I was playing around with it over the weekend, work great.

  Question: Does anyone know how to change the corner radius using NiftyCube to a set pixel radius?

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 9, 10, 2:46 a.m. – Permalink

• lukus_W

  I think it's good to choose pointy corners sometimes.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earFeb 9, 10, 2:49 a.m. – Permalink