# Appearance

The `MaskedTextBox` provides a predefined set of appearance options.

Apart from the default vision of the `MaskedTextBox`, these alternative styling options enable you to configure each individual aspect of the component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

* [MaskedTextBox Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/maskedtextbox/appearance#configurator-demo)
* [MaskedTextBox Sizes](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/maskedtextbox/appearance#size)
* [MaskedTextBox Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/maskedtextbox/appearance#roundness)
* [MaskedTextBox Fill Mode](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/maskedtextbox/appearance#fill-mode)

## Configurator demo

The following example demonstrates configuring different aspects of a `MaskedTextBox` appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/maskedtextbox/appearance/configurator/source.txt)

## Size

The size of the `MaskedTextBox` is controlled through its [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#size) property. The values we can pass to the property are as follows:

* `small` — Sets the `padding` to `2px` and `8px`.
* `medium` — Sets the `padding` to `4px` and `8px`.
* `large` — Sets the `padding` to `6px` and `8px`.

The following example demonstrates the usage of each `size` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/maskedtextbox/appearance/size/source.txt)

## Roundness

The roundness of the `MaskedTextBox` is controlled through its [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#rounded) property. The values we can pass to the property are as follows:

* `none` — Sets no `border radius`.
* `small` — Sets the `border radius` to `1px`.
* `medium` — Sets the `border radius` to `2px`.

- `large` — Sets the `border radius` to `4px`.

* `full` — Sets the `border radius` to `9999px`.

The following example demonstrates the usage of each `rounded` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/maskedtextbox/appearance/rounded/source.txt)

## Fill Mode

The styling of the `MaskedTextBox` is controlled through its [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#fillmode) property. The values we can pass to the property are as follows:

* `solid` — Sets a `background` color and `solid borders`.
* `flat` — Sets `transparent background and borders` in default state, and `background color` in focused state.
* `outline` — Sets a `transparent background` and `solid borders`.

The following example demonstrates the usage of each `fillMode` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/maskedtextbox/appearance/fill-mode/source.txt)

## Suggested Links

* [API Reference of the MaskedTextBox](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops)
* [MaskedTextBox `size` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#size)
* [MaskedTextBox `rounded` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#rounded)
* [MaskedTextBox `fillMode` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/maskedtextboxprops#fillmode)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)