How to make TWebPanel have rounded corners?

Question

I'm trying to get this done on TMS Web Core via Delphi code using.

procedure TForm1.WebFormCreate(Sender: TObject);
begin
 pnlPersonalInfo.Margins.Left := 15;
 pnlPersonalInfo.Margins.Top := 15;
 pnlPersonalInfo.Margins.Right := 15;
 pnlPersonalInfo.Margins.Bottom := 15;


 phone.HTML.Text := GetBootstrapIcon('telephone-fill', 24, '#576A33');
 email.HTML.Text := GetBootstrapIcon('envelope-fill', 24, '#576A33');
 location.HTML.Text := GetBootstrapIcon('geo-alt-fill', 24, '#576A33');

 web.HTML.Text := GetBootstrapIcon('globe', 24, '#576A33');
 Github.HTML.Text := GetBootstrapIcon('github', 24, '#576A33');
end;

pnlPersonalInfo is the TWebPanel that I want to give rounded corners.

Answer 1

If you're using Bootstrap, then you can use the official Bootstrap Border Classes.

You can add the classes to the ElementClassName property on the panels. Here are some examples of where I'm styling panels to have rounded corners and be blue using Bootstrap classes:

WebPanel1.ElementClassName := 'bg-primary text-black rounded';
WebPanel2.ElementClassName := 'bg-primary text-black rounded-top';
WebPanel3.ElementClassName := 'bg-primary text-black rounded-end';
WebPanel4.ElementClassName := 'bg-primary text-black rounded-bottom';
WebPanel5.ElementClassName := 'bg-primary text-black rounded-start';
WebPanel6.ElementClassName := 'bg-primary text-black rounded-circle';

---

You can also adjust the rounded sizes like in the following examples:

WebPanel1.ElementClassName := 'bg-primary text-black rounded-0';
WebPanel2.ElementClassName := 'bg-primary text-black rounded-1';
WebPanel3.ElementClassName := 'bg-primary text-black rounded-2';
WebPanel4.ElementClassName := 'bg-primary text-black rounded-3';
WebPanel5.ElementClassName := 'bg-primary text-black rounded-4';
WebPanel6.ElementClassName := 'bg-primary text-black rounded-5';

---

There are also some other class variations from Bootstrap 5.3+ such as:

WebPanel1.ElementClassName := 'bg-primary text-black rounded-bottom-1';
WebPanel2.ElementClassName := 'bg-primary text-black rounded-start-2';
WebPanel3.ElementClassName := 'bg-primary text-black rounded-end-circle';
WebPanel4.ElementClassName := 'bg-primary text-black rounded-start-pill';
WebPanel5.ElementClassName := 'bg-primary text-black rounded-5 rounded-top-0';