Picture elements is the hardest to mod when dealing with elements because the modifications need to be on picture-elements itself. It cannot go on the element itself because it has a ‘style’ field.
Unfortunately, you’ll have to figure out the correct selector, which can be extremely complicated. This post here has a solution for something similar. In your case, your ending adjustment will be { margin-bottom: 0px; } but coming up with the selector will be a chore.
Thanks for that!
But as mostly the next question…
How would I modify style i.e. for the bar itself? I got as selector
#states > bar-card-row:nth-child(1) > bar-card-card > bar-card-background > bar-card-backgroundbar
That’s my style for the picture elements card:
style:
'#root > bar-card':
$: |
ha-card {background: none;
box-shadow: none;
text-shadow: 1px 1px #0005;
}
I set up your situation and I ended up with these:
style:
'#root > bar-card':
$: |
ha-card > #states > bar-card-row { margin-bottom: 0px; }
Not sure how to add a second selector to the same path.
style:
'#root > bar-card':
$: |
ha-card {
background: none;
box-shadow: none;
}
bar-card-name {
color: green;
}
You don’t have to dig for the selectors as they are documented
https://github.com/custom-cards/bar-card#css-elements
If someone is interested in my result:
elements:
- entities:
- entity: sensor.processor_use
max: 100
min: 0
name: CPU
severity:
- color: '#40bf40'
from: 0
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
- entity: sensor.cpu_temperature
max: 100
min: 0
name: Temperatur
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 81
to: 100
- entity: sensor.memory_use
max: 1024
min: 0
name: Memory
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 640
- color: '#ffde00'
from: 640
to: 768
- color: '#fd0000'
from: 768
to: 1024
- entity: sensor.disk_use
max: 30
min: 0
name: Disk
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 15
- color: '#ffde00'
from: 15
to: '22,5'
- color: '#fd0000'
from: '22,5'
- entity: sensor.swap_use
max: 1024
min: 0
name: Swap
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 640
- color: '#ffde00'
from: 640
to: 768
- color: '#fd0000'
from: 768
columns: 5
direction: up
width: 10px
height: 90px
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
title: outside
value: outside
name: outside
style:
left: 50%
top: 68%
width: 100%
scale: 100%
type: 'custom:bar-card'
- entity: sensor.uptime
prefix: 'UpTime: '
style:
color: white
font-size: 125%
left: 70%
top: 24%
title: text
type: state-label
image: /local/images/RPi-card.png
style:
'#root > bar-card':
$: |
ha-card {
background: none;
box-shadow: none;
}
bar-card-name {
color: white;
font-size: 100%;
font-weight: normal;
margin: 4px;
}
bar-card-backgroundbar {
border-shadow: 2pt;
margin-top: -2pt;
margin-left: -2pt;
border-radius: 5pt;
border-style: solid;
#background: rgba(255, 0, 0, 0.8);
background: black;
}
bar-card-value {
font-size: 125%;
color: white;
font-weight: bold;
margin: 4px;
}
bar-card-currentbar {
border-radius: 5pt;
}
type: picture-elements
Why not round the fill bar as well?
very nice indeed!
the top left picture of the raspberry is an overlay? I only have the image without it…
if not, could you please post that too?
restarting now to have the swap sensor created 
will need to see how to clip the txt of the last boot sensor, since it is overflowing the card right now
haha, yes, is another mem sensor. Didnt yet change it to the correct one and didnt set the max/mins correctly.
this is already better:
Very good idea!
Had not thought about that and need to figure out, how to do that. Did a lot of iterations…
Not an overlay. I combined two images with gimp.
bar-card-currentbar, just need to adjust the background radius like you did with bar-card-backgroundbar.
bar-card-currentbar {
border-radius: 6pt;
}
Done and edited my posted code above.
yes, I used the identical 7pt, which shows fine too:
though I wish we could also set the top of the current bar to use a border-radius. Will ask Gluwc if that would be an option he’d consider.
That’s a tall order. He’s using linear gradient which does not have this ability. This request alone would require a rewrite of the entire bar.
had to look that up… 
well, it that’s the case, he probably won’t consider it viable… no harm done, it would just be an further embellishment of an already very nice card
anyone seeing this error to, using the new card_mod 2.0.2:
looking a bit odd too:
would this be the card_mod, barcard, or something else…
update
after some testing I can report it is the update from card_tools from 2.0.0 to a higher version causing this. back on 2.0.0 and the style works again. Have reported other issues too with the new card_mod, so hopefully this will soon be fixed.
Might you pls. post the solution? I tried some of the issue, but haven’t figured out yet.
delete the spaces in the line:
style:
'#root>bar-card':
was there any update / fix yet to this card formatting issue? (also doesn’t seem to render well on android app)