UnityRef is currently in early development. Some features may be incomplete and/or not functioning.

UNITYREF

Your Pit Stop For Solving ANYTHING in Unity

ui

[UI Toolkit] Missing border-style Property Support in USS

Solution

ui toolkitussgraphicsstylinglayout

Unity 2021.x - Unity 6.3.x

Published 21 days ago

Author Profile Photo

Reviewed by _architect

Chief Editor

80 posts
Issue

 Unity style sheets (USS) do not currently support the border-style property used in standard CSS for defining dashed, dotted, or double borders. This limitation prevents developers from styling VisualElement borders beyond solid lines through simple style definitions.

While properties for width, color, and radius exist, the logic for pattern-based strokes is absent from the UI Toolkit rendering pipeline.

Quick-Fix

The border-style property is not supported in USS. Advanced border appearances must be implemented using 9-sliced VectorImage assets or custom geometry.

Expand Analysis

The border-style property is currently unsupported in UI Toolkit USS implementations. Standard web CSS values such as dashed or dotted will not resolve in the UI Builder or at runtime. To replicate these visual styles, developers must rely on asset-based workarounds or procedural mesh generation.

  1. Create a 9-sliced Sprite or VectorImage that contains the desired border-style pattern.
  2. Assign the asset to the background-image property of your VisualElement.
  3. Configure the slice properties in the USS file or the Inspector to ensure the pattern repeats or scales correctly without distorting the corners.
  4. Set the border-width to 0 to ensure the default solid border does not interfere with your custom border-style asset.

Additional Tips

  • Use a VectorImage (SVG) instead of a Texture2D to ensure that the border-style remains crisp at various resolutions and scales.
  • If dynamic borders are required, override the generateVisualContent callback in a custom VisualElement class. This allows you to use MeshGenerationContext to draw a custom Painter2D path with specific stroke patterns, effectively simulating a procedural border-style.

Copy 



/* Example of applying a custom border-style via sliced background image in USS */
.dashed-border-container {
    /* Use a 9-sliced SVG/VectorImage instead of border-style */
    background-image: url('project:/Assets/UI/Textures/DashedBorder.svg');
    
    /* Define slicing values to protect the dashed corners */
    -unity-background-image-tint-color: white;
    -unity-slice-left: 10;
    -unity-slice-top: 10;
    -unity-slice-right: 10;
    -unity-slice-bottom: 10;
    
    /* Ensure standard borders are disabled */
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
[UI Toolkit] Customize Slider Fill Color via USS Selectors[UI Toolkit] Animate Tiled Background Scrolling[UI Toolkit] Master Percentage Binding for Responsive Layouts

Content inspired by a Unity discussion post.