# Appearance

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

For a complete example, refer to the [Appearance Demo of the OTPInput](https://demos.telerik.com/aspnet-core/otpinput/appearance).

## Options

The OTPInput supports the following styling options:

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

### Size

To control the size of the OTPInput, configure the `Size` option with any of the following values:

* `Small`
* `Medium`
* `Large`
* `None`

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

```Razor HtmlHelper
    @(Html.Kendo().OTPInput()
        .Name("otpinput")
        .Size(ComponentSize.Large)
        .Items(5)
    )
```

```Razor TagHelper
    <kendo-otpinput name="otpinput"
        size="ComponentSize.Large"
        items="5">
    </kendo-otpinput>
```

```Html
    <span class="k-input k-otp-input k-input-lg"></span>
```

### FillMode

The `FillMode()` method specifies how the color is applied to the component.

The following options are available for the `FillMode` configuration:

* `Solid`
* `Outline`
* `Flat`
* `None`

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

```Razor HtmlHelper
    @(Html.Kendo().OTPInput()
        .Name("otpinput")
        .FillMode(FillMode.Outline)
        .Items(5)
    )
```

```Razor TagHelper
    <kendo-otpinput name="otpinput"
        fill-mode="FillMode.Outline"
        items="5">
    </kendo-otpinput>
```

```Html
    <span class="k-otp-input k-input k-input-outline"></span>
```

### Rounded

The border radius of the component can be customized through the `Rounded()` method.

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

* `Small`
* `Medium`
* `Large`
* `Full`
* `None`

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

```Razor HtmlHelper
    @(Html.Kendo().OTPInput()
        .Name("otpinput")
        .Rounded(Rounded.Full)
        .Items(5)
    )
```

```Razor TagHelper
    <kendo-otpinput name="otpinput"
        rounded="Rounded.Full"
        items="5">
    </kendo-otpinput>
```

```Html
    <span class="k-input k-otp-input k-rounded-full"></span>
```

## See Also

* [Appearance of the OTPInput for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/otpinput/appearance)

* [Server-Side API of the OTPInput HtmlHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/otpinput)

* [Server-Side API of the OTPInput TagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/otpinput)

* [Client-Side API of the OTPInput](https://docs.telerik.com/kendo-ui/api/ui/otpinput)