Add border or outline without affecting placement

How-to
1

In my app I have a row of objects and want to draw a border around one as a highlight.
When I add a border, the child objects now have less room so appear in different positions relative to the others.

Screenshot 2026-01-30 at 13.19.34

Is there a way with LVGL to add a border to an object without affecting placement?
I don’t mind if the border is inside the edge of the object, or outside (so long as it’s always on top and visible)

I am highlighting a child using:

static void ui_highlight(lv_obj_t *parent, uint32_t index) {
    uint32_t i;
    uint32_t count = lv_obj_get_child_count(parent);
    for(i = 0; i < count; i++) {
        lv_obj_t * child = lv_obj_get_child(parent, i);
        if (i == index) {
            lv_obj_set_style_border_width(child, UI_HIGHLIGHT_BORDER_WIDTH, LV_PART_MAIN);
            lv_obj_set_style_border_opa(child, 255, LV_PART_MAIN);
            lv_obj_scroll_to_x(parent, lv_obj_get_x(child), LV_ANIM_ON);
        } else {
            lv_obj_set_style_border_width(child, 0, 0);
            lv_obj_set_style_border_opa(child, 0, LV_PART_MAIN);
        }
    }
}

Thanks

2

Use style outline

lv_obj_set_style_outline_width
lv_obj_set_style_outline_opa

https://docs.lvgl.io/master/common-widget-features/styles/style-properties.html#outline

3

Because I have a row of objects all budged up against each other, I think the outline is being drawn over by the next object.

Is there a way to force the outline to be drawn on top?

4

Make sure you set the padding and margin’s to zero. I don’t remember which but one of them comes preset to a few pixels. That will probably give you the space that is needed for the outline or border. you will have to try setting an outline and then a border and see which one will work correctly once you remove the padding and or the margin. This actually drove me bonkers for a while because I didn’t know that one of them is preset and aligning things was not making sense the relative position of 0, 0 for a parent object was not all the way at the upper left corner when the alignment was set to there.

For some reason I want to say that the padding is preset and that is the one you will want to set to zero.