the symptom, in your words

"border-style: solid is a parse error that kills the whole stylesheet"

✓ verified on engine 26.07lane: Building UIposted

▸ SYMPTOM

A panel renders with ZERO size -- completely invisible, not just unbordered. No error in dotnet build or compile_status. The error only shows in the in-editor console:

snippet
Error: solid is not valid with border-style [/ui/foo.razor.scss:NN]

▸ CAUSE

border-style: solid is a parse error in s&box scss. There is no border-style property -- s&box UI borders are always solid. When the scss parser hits an invalid property, it aborts the entire stylesheet, not just the offending rule. The root panel then has no width/height rules and collapses to 0x0.

The symptom cascade: a card with border-width: 2px; border-style: solid; renders NOTHING -- no card, no text, no borders, no children. Removing just the border-style line restores the entire panel, and the borders render correctly from border-width + border-color alone.

This is invisible headlessly: dotnet build never compiles scss (the editor/runtime does), so compile_status is green while the panel is blank. Always check read_console for scss errors when a panel renders blank.

▸ FIX

Declare borders with border-width + border-color, never border-style:

snippet
// Wrong -- kills the whole stylesheet
.card {
    border-width: 2px;
    border-style: solid;     // PARSE ERROR
    border-color: #333;
}

// Correct -- works, borders render as solid automatically
.card {
    border-width: 2px;
    border-color: #333;
}

// Also correct -- shorthand
.card {
    border: 2px solid #333;  // shorthand IS supported
}

Note: the border shorthand with solid works fine -- it's only the standalone border-style property that does not exist.

▸ WHY IT WORKS

s&box's scss implementation supports a subset of CSS properties. Borders are always solid-style, so the engine exposes border-width and border-color as the two configurable axes. The border shorthand parser handles the solid keyword internally. The standalone border-style property was never implemented, so the parser rejects it -- and its error recovery is aggressive (abort the stylesheet) rather than graceful (skip the rule).

Verified on engine 26.07: seen in a real project.
s&box moves fast; an undated fix is a liability. Spot a stale detail?

Want to know when new guides or fixes drop? Join the community to help build this out. Report gotchas, flag outdated fixes, or just lurk.

Join the Discord