UI Toolkit TextField Rounded Corner ? (Border Radius)

Hi,

I just can’t figure out how to apply a 3px border radius to my TextField in UI Toolkit ! When we use a TextField, there’s the main TextField component and a sub-component "unity-text-input" which is disabled. When i apply the radius to the main component, it’s for the outside border, and i can’t change/apply anything to the inner component. I also have a problem setting the TextField’s inner margin/padding, when trying to make the height smaller, the text disappear.

Any help ?

_

Option A: USS style file

TextField {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-color: rgba(255, 0, 0, 255);
    border-right-color: rgba(255, 0, 0, 255);
    border-top-color: rgba(255, 0, 0, 255);
    border-bottom-color: rgba(255, 0, 0, 255);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

TextField Label {
    border-left-color: rgba(0, 255, 0, 255);
    border-right-color: rgba(0, 255, 0, 255);
    border-top-color: rgba(0, 255, 0, 255);
    border-bottom-color: rgba(0, 255, 0, 255);
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

TextField #unity-text-input {
    border-left-color: rgba(0, 0, 255, 255);
    border-right-color: rgba(0, 0, 255, 255);
    border-top-color: rgba(0, 0, 255, 255);
    border-bottom-color: rgba(0, 0, 255, 255);
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

Option B: runtime style changes

AdventuresInRuntimeStyleChanges.cs

using UnityEngine;
using UnityEngine.UIElements;

using UnityEditor;
public class AdventuresInRuntimeStyleChanges : EditorWindow
{
	public void OnEnable ()
	{
		var root = rootVisualElement;
		
		var textField = new TextField("Label");
		{
			textField.style.SetBorder( Color.red , 1 , 3 );
			
			var label = textField.Q<Label>();
			if( label!=null )
			{
				label.style.SetBorder( Color.green , 1 , 3 );
				label.style.SetMargin( 1 );
				label.style.SetPadding( 1 );
			}
			
			var textInput = textField.Q("unity-text-input");
			if( textInput !=null )
			{
				textInput.style.SetBorder( Color.blue , 1 , 3 );
				textInput.style.SetMargin( 1 );
				textInput.style.SetPadding( 1 );
			}
		}
		root.Add( textField );
	}

	[MenuItem("Test/Adventures In Runtime Style Changes")]
	static void ShowWindow ()
		=> GetWindow<AdventuresInRuntimeStyleChanges>().titleContent = new GUIContent("Adventures In Runtime Style Changes");
}

ExtensionMethods_IStyle.cs

public static class ExtensionMethods_IStyle
{
	public static void SetBorder ( this IStyle style , Color col , int width , int radius )
	{
		style.borderTopColor = style.borderLeftColor = style.borderRightColor = style.borderBottomColor = col;
		style.borderTopWidth = style.borderLeftWidth = style.borderRightWidth = style.borderBottomWidth = width;
		style.borderTopLeftRadius = style.borderTopRightRadius = style.borderBottomLeftRadius = style.borderBottomRightRadius = radius;
	}
	public static void SetPadding ( this IStyle style , int padding )
		=> style.paddingBottom = style.paddingLeft = style.paddingRight = style.paddingTop = padding;
	public static void SetMargin ( this IStyle style , int margin )
		=> style.marginBottom = style.marginLeft = style.marginRight = style.marginTop = margin;
}

Perfect, thanks… i was trying a bit too hard from inside the IDE :slight_smile: