# Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core TimePicker.

For a live example, visit the [Appearance Demo of the TimePicker](https://demos.telerik.com/aspnet-core/timepicker/appearance).

## Options

The TimePicker supports the following styling options:

* [`Size`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/appearance#size)—configures the overall size of the component.
* [`Rounded`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/appearance#rounded)—configures the border radius of the component.
* [`FillMode`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/timepicker/appearance#fillmode)—configures how the color is applied to the component.

### Size

```Razor HtmlHelper
@(Html.Kendo().TimePicker()
    .Name("timepicker")
    .Size(ComponentSize.Medium)
)
```

```Razor TagHelper
<kendo-timepicker name="timepicker"
                  size="ComponentSize.Medium"/>
```

The `Size` option controls the size of the input of the TimePicker. The `k-input-{size}` class, which is applied to the wrapping span element of the TimePicker, reflects the value of the `Size` option.

The following values are available for the `Size` option:

* `Small`—small size (applies the `k-input-sm` class to the wrapping span element)
* `Medium`—medium size (applies the `k-input-md` class to the wrapping span element)
* `Large`—large size (applies the `k-input-lg` class to the wrapping span element)

> When not explicitly set, the applied theme controls the default size.

> The `None` value is deprecated. Use custom CSS instead.

### Rounded

```Razor HtmlHelper
@(Html.Kendo().TimePicker()
    .Name("timepicker")
    .Rounded(Rounded.Medium)
)
```

```Razor TagHelper
<kendo-timepicker name="timepicker"
                  rounded="Rounded.Medium"/>
```

The `Rounded` option controls the border radius of the TimePicker. The class that corresponds to the `Rounded` option is `k-rounded-{rounded}`.

The following values are available for the `Rounded` option:

* `Small`—small border radius (applies the `k-rounded-sm` class to the wrapping span element)
* `Medium`—medium border radius (applies the `k-rounded-md` class to the wrapping span element)
* `Large`—large border radius (applies the `k-rounded-lg` class to the wrapping span element)
* `Full`—largest (ellipse-like) border radius (applies the `k-rounded-full` class to the wrapping span element)

> When not explicitly set, the applied theme controls the default border radius.

> The `None` value is deprecated. Use custom CSS instead.

### FillMode

```Razor HtmlHelper
@(Html.Kendo().TimePicker()
    .Name("timepicker")
    .FillMode(FillMode.Solid)
)
```

```Razor TagHelper
<kendo-timepicker name="timepicker"
                  fill-mode="FillMode.Solid" />
```

The `FillMode` option controls how color is applied to the component. The structure of the class is `k-input-{fillMode}`.

The following values are available for the `FillMode` option:

* `Solid`—applies the `k-input-solid` class to the wrapping span element
* `Flat`—applies the `k-input-flat` class to the wrapping span element
* `Outline`—applies the `k-input-outline` class to the wrapping span element

> When not explicitly set, the applied theme controls the default fill mode.

> The `None` value is deprecated. Use custom CSS instead.

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview)
* [Appearance Demo of the TimePicker](https://demos.telerik.com/aspnet-core/timepicker/appearance)