Member Avatar for shrid

Hi, Can anyone pls tell me how to get curved buttons in CSS....?

border:2px solid #333333;
    border-radius:10px;

Is this code correct?But it didn't work for me.
Pls help me..

  • 5 Contributors
  • 5 Replies
  • 99 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

A few clarifying points and a quick, modern checklist that build on the suggestions from , , , and .

Rounded corners are best handled with the standard CSS property that browsers support today; the image/JS workarounds mentioned earlier were practical in 2009 but are usually unnecessary now. For exact compatibility details see the spec and the support tables below.

Common causes when a corner rule "does not work"

  • The stylesheet or selector never reaches the element (check the Network and Computed panels in devtools).
  • A browser's native control styling can hide changes on inputs/buttons (native appearance can override visual rules).
  • Another rule (more specific selector or an !important) is overriding the style.
  • The rounded effect is applied to the wrong element while a child with a background or overflow is still square.

Practical guidance

  • Prefer semantic controls (HTML button elements) and apply the visual rule as progressive enhancement; keep visible focus outlines for keyboard users.
  • For projects that must support very old browsers (IE8 and earlier) use a graceful fallback: a simple image or SVG corner, or accept square corners for legacy users. Most modern sites rely on the standard property and degrade cleanly for ancient clients.
  • Use devtools to toggle the property on/off to isolate whether the problem is specificity, inheritance, or user-agent style.

Example of a semantic control to style (apply modern CSS to this)

<button class="rounded">Save</button>

References: MDN — border-radius, Can I use — border-radius support

Recommended Answers

All 5 Replies

Member Avatar for buddylee17

The border-radius attribute isn't yet supported by many browsers, like IE. I would recommend using FireWorks or Photoshop to make your buttons, since border-radius is only supported by Firefox, Safari, and a few others.

Member Avatar for roryt

Yeh as Buddylee17 said, they aren't supported fully yet and will be part of css 3.0 i believe. Now as for making them in photoshop, if you are just uing a flat colour for the button then what you need to think about is creating a transparent gif file that simply covers the corners up of a rectangle that you create with html.

There are also some javascript ways of creating rounded corners aswell. I believe that daniweb either does or did use them for a while to create the boxes around the forum posts.

Member Avatar for ccube921

Ive seen Jquery do rounded corners with a simple one line link to some of its JS.
Of course Inkscape and GIMP (Free graphic tools) offer rounded corners as well.

Member Avatar for MidiMagic

I just made an image with mspaint and used it as the button image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.