Member Avatar for VenusCrystal

Hi,

Can anyone tell me how to get rounded border for radio buttons using css for chrome browser?
[like -moz-outline-radius for mozilla]

Thanks,
VC

  • 4 Contributors
  • 6 Replies
  • 545 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short summary and modern options (follow-up to ): wrapping the native radio in a rounded container is a perfectly practical fix and keeps the browser’s built-in behavior. If you want to change only the accent (color) of Chrome’s native circle, use the CSS accent-color property as a progressive enhancement. If you need a different shape, border thickness or animated inner dot, remove the native rendering and build a visual replacement with appearance: none (and vendor prefix) plus pseudo-elements. See the browser docs for appearance and accent-color. (developer.mozilla.org)

A compact, widely used pattern is: remove the native look, draw an outer circle on the input, then add an ::after (or ::before) element for the inner checked dot. Keep the input in the DOM (don’t display:none) so semantics and keyboard focus remain. Example (visual-only; keep proper labels in your markup):

input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666;
  border-radius: 50%;
  position: relative;
  vertical-align: middle;
}

input[type="radio"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #222;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .12s ease;
}

input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

input[type="radio"]:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

When replacing the native UI, confirm keyboard and screen-reader behavior (associate labels, preserve tab/space activation, and maintain focus styles). The WAI‑ARIA Authoring Practices cover radio-group keyboard rules and labeling; MDN’s advanced form-styling notes explain the appearance approach and pseudo-element technique. Test across browsers and use accent-color as a graceful fallback where you only need a color tweak. (mdn2.netlify.app)

Extra tips: mention your HTML/markup when you post code (as and suggested) so responders can point out label-for association, focus behavior, and any Bootstrap resets that might interfere. If you keep the wrapper trick that worked for you, add keyboard‑visible focus styling on the wrapper so users who tab can still see which option is focused. (smashingmagazine.com)

Recommended Answers

All 6 Replies

Member Avatar for Member #660041

You're on the right path. You just need to set the fieldset border. You can use border-radius: 2px;. Then set the border as needed (color, style, etc.) This will work in Chrome, Firefox, IE 7, IE 8, IE 9 Compatibility View & Opera. This will not work in IE 9 though.

Here's a link for styling forms:

Member Avatar for VenusCrystal

Thank you.
But that doesnt seem to give rounded border for radio buttons. It works for divs.
I need extra rounded outline for radio buttons.

Member Avatar for Member #660041

Please post your code snippet that uses the radio buttons and add comments so we can see what you are trying to accomplish.

Member Avatar for VenusCrystal

Thanks for your answers.

I found the solution myself. I wrapped radio button within div tag and gave border-radius for div. It is working now.

Member Avatar for ome2012

that's good for you..... ^_^ you can mark this as solved...

Member Avatar for JorgeM

feel free to post your code to help others that may come accross this same issue.

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.