Beautify your RadioButtons!

Typically RadioButton-Controls are not customized a lot. A group of bullets with descriptions - also in modern UIs - the design stays the same. However, with just a few tweaks and colors,
the apperance gets "modernized" in seconds.

Here's an example of how your RadioButtons could look like:

lightgray rectangles:

To get the rounded corners you can use two border-elements. The inner-border's visiblity is set to "hidden" until it is checked (triggered).

Code

tick boxed:

In this example the whole control is "boxed". The box consists of two border (rounded corners just at the edges).
Special bullet style is a polygon, shaped to an tick-symbol like the checkbox has.

Code

button stripe 1:

Quite simple style. Commonly seen in real life as lightswitch with LED for on/off status.

Code

button stripe 2:

Same as button stripe 1, but with horizontal align of the "light"-bar.

Code