Site messages should follow a proper design format, ensuring that errors, warnings, and status messages are clearly distinguishable and user-friendly.

Please check styled all three Status , Error and Warning message.

This seems to be a JavaScript or dependency error, not a CSS issue.

@rahuly072, this is not a CSS issue. The message design has already been implemented. You can review it here: messages.css.

https://git.drupalcode.org/project/flexi_style/-/blob/1.4.x/css/component/messages.css?ref_type=heads

Suggested Solution (1st):
Try disabling the BigPipe module and check if the issue persists.

I am looking into it.

Hi @anoopsingh92, after disabling Bigpipe module the issue is not coming. But instead of disabling Bigpipe module we can go with this solution

use Drupal\Core\Render\Element\StatusMessages;

function flexi_style_preprocess_block__system_messages_block(&$variables) {
  $variables['content'] = StatusMessages::renderMessages();
  $variables['#cache']['max-age'] = 0;
}

you can see this core issue for reference: https://www.drupal.org/project/drupal/issues/3456176#comment-15738200. Kindly share your review on the changes.

Thanks @sandip-poddar for identify the issue.
You didn't make any changes in the CSS file, can you please checkout this file from the MR css/base/elements.css

Yes @anoopsingh92, I am doing it.

Please verify the MR.

@anoopsingh92,
Since the issue has been solved and MR has been merged, can we move this issue to fixed now?