Custom Widget: Dynamic Change of Border

the widget for the temperature display should show a red wide border at below 0 degrees Celsius.

currently the widget looks like this:

grafik

<div  style="margin-top: 0px">
  <span style="font-size: 12pt; line-height: 160%" >
    Aussen
  </span>
</div>
<div>
  <span style="font-size: 16pt; color: rgb(19, 115, 143); line-height: 160%">
    {{'%.1f' | sprintf:itemValue('OdGh_NetatmoWeather_Temperature')}} °C
  </span>
</div>
<div align="right">
  <span style="font-size: 12pt; color:blue; line-height: 100%; margin-right: 28px">
    {{'%.1f' | sprintf:itemValue('OdGh_NetatmoWeather_MinTemp')}} °C  
</div>
<div align="right">
   <span   style="font-size: 12pt; color:red; line-height: 100%; margin-right: 28px">
 {{'%.1f' | sprintf:itemValue('OdGh_NetatmoWeather_MaxTemp')}} °C</span>
</div>

with <div ng-if="itemValue('C… I could double the whole code sequence, which I don’t think makes sense.

How do you do that, to optionally style the border according to an item state?