How to Change the Color of Radio Buttons

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)

Change the circle color of radio button

It is simpler just setting the buttonTint color (only works on API level 21 or above):

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="true"
    android:buttonTint="@color/your_color"/>

In your values/colors.xml file, put your color, in this case a reddish one:

<color name="your_color">#e75748</color>

Result:

Colored Android Radio Button

If you want to do it by code (also API 21 and above):

if(Build.VERSION.SDK_INT >= 21)
{
    ColorStateList colorStateList = new ColorStateList(
            new int[][]
            {
                new int[]{-android.R.attr.state_enabled}, // Disabled
                new int[]{android.R.attr.state_enabled}   // Enabled
            },
            new int[]
            {
                Color.BLACK, // disabled
                Color.BLUE   // enabled
            }
        );

    radio.setButtonTintList(colorStateList); // set the color tint list
    radio.invalidate(); // Could not be necessary
}

How change the color of the radio button

There are two ways to style radio buttons (and checkboxes by the way) only with CSS:

via styling label's pseudoselector and hiding radio buttons

/* completely hiding radio button */
input[type="radio"] {
  display: none;
}

/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 3px;
  margin-right: 5px;
  /* background-color only for content */
  background-clip: content-box;
  border: 1px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance of checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: red;
}

/* resetting default box-sizing */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* optional styles for centering radiobuttons */
.sound-signal label {
  display: inline-flex;
  align-items: center;
}

<div class="sound-signal">
  Signal sonore:
  <input type="radio" name="soundsignal" id="soundsignal1" checked="checked">
  <label for="soundsignal1">Oui</label>
  <input type="radio" name="soundsignal" id="soundsignal2">
  <label for="soundsignal2">Non</label>
</div>

Is it possible to change the color of selected radio button's center circle

You can mimic the radio button using some round border trick (to render the outer circle) and the pseudo-element :before (to render the inner circle) which can fortunately be used on an input field of radio type:

input[type='radio'] {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  border:1px solid darkgray;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px gray inset;
}

input[type='radio']:hover {
  box-shadow:0 0 5px 0px orange inset;
}

input[type='radio']:before {
  content:'';
  display:block;
  width:60%;
  height:60%;
  margin: 20% auto;    
  border-radius:50%;    
}
input[type='radio']:checked:before {
  background:green;
}

Working Demo.

How to change color on radio button material-ui

You need to set the color of the radio to be primary to match the primary color from the theme.

control={<Radio color='primary'/>}

Need to change the border color of customised radio buttons during checked

Instead of using another pseudoelement you could play with a background and a box-shadow

.custom-radio-input {
     position: relative;
     z-index: 1;
     display: block;
     min-height: 1.5rem;
     padding-left: 1.5rem;
}
 .custom-radio-input .form-check-input {
     cursor: pointer;
}
 .custom-radio-input .form-check-input::before {
     content: " ";
     display: inline-block;
     position: relative;
     top: -1px;
     left: -1px;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 1px solid grey;
     background-color: grey;
}
 
.custom-radio-input .form-check-input:checked::before {
  
     background: blue;
     border: 2px blue solid;
     box-shadow: inset 0 0 0 2px #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>
     <div class="custom-radio-input">
        <input class="form-check-input" type="radio" name="radiobutton">
    </div>