Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Quick Tip: How to create rounded corners in pure CSS.


  • Please log in to reply

#1
Diffraction

Diffraction

    New Member

  • Member
  • Pip
  • 7 posts
Hey guys,

Welcome to the first of a series of "quick tips" I'll be doing.

The first one starts with a fun technique for rounded corners (without images) on your webpage.

In your HTML you will need a div such as:

<div class="rounded"><p>Example div</p></div>

And then in your CSS we will style that box by giving it a width, height, background-color and then applying the browser specific border-radius properties.

#rounded {  width:150px;  height:150px;  background-color:grey;  border-radius:8px;  -moz-border-radius:8px;  -webkit-border-radius:8px;}


The first border-radius property will give us rounded corners in the Opera browser.

The second -moz-border-radius property is for Gecko based browsers (like Mozilla Firefox).

The third and final property -webkit-border-radius is for WebKit based browsers like Google Chrome and Apple's Safari.

For more information about CSS3, I recommend CSS3.info.

Enjoy!
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Lot of that is old hat and is available on the Internet. Besides, I thould only posts requesting help were allowed. Did the Terms of Use change?
  • 0

#3
Diffraction

Diffraction

    New Member

  • Topic Starter
  • Member
  • Pip
  • 7 posts
I'm sorry, I'm new to the forum and thought I would contribute in the area I specialize in.

Edited by Diffraction, 13 July 2010 - 09:31 PM.

  • 0

#4
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
Double-check the forums and see if they have a section that allows those "quick tips". Would be neat if there is a section for them. Think they had something for tutorials that were submitted for approval. Don't know if that is still available.

Nice tip, BTW.

Edited by AstraNut, 13 July 2010 - 09:53 PM.

  • 0

#5
the observationist

the observationist

    New Member

  • Member
  • Pip
  • 5 posts
wow, i never actually knew about that. I've been making ueber-heavy code that does it pretty much the same way they did it with tables way back. thanks!


BTW, you mention WebKit, mozilla and opera...does IE support this property and is it W3C complient?

Edited by the observationist, 01 October 2010 - 10:58 AM.

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP