Question 260627 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make TWebPanel have rounded corners?

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.

Tags:

2

Answers


  1. 0

    You can give any component rounded corners by using inline CSS. Here are three examples:

    // Rounded corners for all four corners:
WebPanel1.ElementHandle.style.setProperty('border-radius','50px');

// Rounded corners for top-left and bottom-left corners:
WebPanel2.ElementHandle.style.setProperty('border-radius','50px 0 0 50px');

// Rounded corners for top-right and bottom-right corners:
WebPanel3.ElementHandle.style.setProperty('border-radius','0 50px 50px 0');

    Delphi TMS Web Core Panels with Rounded Corners

    Login or Signup to reply.
  2. 0

    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';

    Delphi TMS Web Core Panels with rounded corners using Bootstrap

    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';

    Delphi TMS Web Core Panels with rounded corners using Bootstrap

    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';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search