Setting a border on a TWebLabel not working

Question

I am trying to do this on a TWebLabel, giving it a solid border of 5px and coloring it. I attempted to use .setProperty as mentioned in this post (How to make TWebPanel have rounded corners?) I attempted this on the TWebLabel (lblHome)

lblHome.ElementHandle.style.setProperty('border-top', '5px solid #da3b26');

But nothing happens?

Answer 1

I just tested this on my side and it seems to be working. I made a blank new app, placed a TWebLabel onto the form, and added the exact same code into a button click event and it's added the border-top to the label as can be seen by this image below:

So perhaps your label has some other properties that are stopping the border-top from working?

Maybe the label's border/corners are out of bounds, so the border is there, but you just can't see it?

Maybe also delete the label and re-add it to the form and then try again.

---

The below code should work to add a border:

WebLabel1.ElementHandle.style.setProperty('border', '5px solid #da3b26');

But you can also add a border with the following code:

var
  BorderStyle: String;
begin
  BorderStyle := WebLabel1.ElementHandle.getAttribute('style') + ';border: 5px solid #da3b26;';
  WebLabel1.ElementHandle.setAttribute('style',BorderStyle);
end;

And if you're using Bootstrap:

WebPanel1.ElementClassName := 'border border-5 border-danger'; 

border-top for only the top border using Bootstrap.