New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Appearance

Updated on Feb 4, 2026

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

For a live example, visit the Appearance Demo of the TextArea.

Options

The TextArea HtmlHelper supports the following styling methods:

Size()—configures the overall size of the component.
Rounded()—configures the border radius of the component.
FillMode()—configures how the color is applied to the component.
Overflow()—configures the overflow behavior of the element.
Resize()—configures how the resizing of the element is applied.

Size

The Size() method allows you to adjust the size of the TextArea.

Razor
@(Html.Kendo().TextArea()
    .Name("description")
    .Size(ComponentSize.Medium)
)
Razor
<kendo-textarea name="description"
                size="ComponentSize.Medium">
</kendo-textarea>

The option adds a class k-input-md to the wrapping span element span.k-textarea:

html

<span class="k-textarea k-input k-input-md">
</span>

The following values are available for the Size option:

Small
Medium
Large

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

The None value is deprecated. Use custom CSS instead.

Rounded

You can control how much border radius is applied to the component by using the Rounded() method.

Razor
@(Html.Kendo().TextArea()
    .Name("description")
    .Rounded(Rounded.Medium)
)
Razor
<kendo-textarea name="description"
                rounded="Rounded.Medium">
</kendo-textarea>

The value Medium is applied to the wrapping span element through the k-rounded-md class.

html

<span class="k-textarea k-input k-rounded-md">
</span>

The Rounded() method supports the following values:

Small
Medium
Large
Full

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

The None value is deprecated. Use custom CSS instead.

FillMode

The FillMode option controls the way the color is applied to the component.

Razor
@(Html.Kendo().TextArea()
    .Name("description")
    .FillMode(FillMode.Solid)
)
Razor
<kendo-textarea name="description"
                fill-mode="FillMode.Solid">
</kendo-textarea>

The option adds a class k-input-solid to the wrapping span element of the TextArea:

html

<span class="k-textarea k-input k-input-solid">
</span>

The following values are available for the FillMode option:

Solid
Flat
Outline

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

The None value is deprecated. Use custom CSS instead.

Overflow

The Overflow() method allows you to handle the content overflow of the TextArea. By default, it is set to Auto.

Razor
@(Html.Kendo().TextArea()
    .Name("description")
    .Overflow(TextAreaOverflow.Auto)
)
Razor
<kendo-textarea name="description"
                overflow="TextAreaOverflow.Auto">
</kendo-textarea>

The option is applied to the TextArea element through the k-overflow-auto class.

html

<textarea class="k-input-inner k-overflow-auto" placeholder="..."></textarea>

The following values are available for the Overflow option:

Auto
Hidden
Visible
Scroll
Clip

Resize

The Resize() method defines how the component should be resized. The default Resize value is None.

Razor
@(Html.Kendo().TextArea()
    .Name("description")
    .Resize(TextAreaResize.None)
)
Razor
<kendo-textarea name="description"
                resize="TextAreaResize.None">
</kendo-textarea>

The option is applied to the wrapping span element through the k-resize-none class.

html

<span class="k-textarea k-input k-resize-none">
</span>

The following values are available for the Resize option:

Important: The Auto option can be used only with the MaxRow() configuration.

Auto
Both
Horizontal
Vertical
None

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 article.

To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. 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.