# Appearance

The timepicker provides a predefined set of appearance options.

Apart from the default vision of the TimePicker, these alternative styling options enable you to configure each individual aspect of the appearance of a TimePicker.

* [Size](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/appearance#size)
* [Fill Mode](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/appearance#fill-mode)
* [Rounded](https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/appearance#rounded)

The following example demonstrates all the available appearance options of the TimePicker in a single, configurable demo.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/timepicker/appearance/func/source.txt)

## Size

You can set the size of the TimePicker through the [`size`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#size) property. The TimePicker component comes in three different sizes: `small`, `medium` (default), and `large`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/timepicker/appearance/size/func/source.txt)

## Fill Mode

You can set the fill mode of the TimePicker through the [`fillMode`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#fillmode) property. The TimePicker provides three different fill mode options: `solid` (default), `outline`, and `flat`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/timepicker/appearance/fillMode/func/source.txt)

## Rounded

You can set the roundness of the TimePicker through the [`rounded`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#rounded) property. The TimePicker component supports five different degrees of roundness: `small`, `medium` (default), `large`, `full`, and `none`.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/timepicker/appearance/rounded/func/source.txt)

## Suggested Links

* [API Reference of the TimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops)
* [TimePicker `size` options](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#size)
* [TimePicker `fillMode` options](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#fillmode)
* [TimePicker `rounded` options](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/timepickerprops#rounded)
* [Creating Custom Styles](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs)