[Fixed] Angular Select Dropdown make edges of the container rounded and give specific border

Issue

I want the dropdown list to look something like this.

I am able to apply the hover effect but I cannot figure out how to move the dropdown list/container downwards and also how to make the edges of the container rounded and give specific border

I want a CSS only solution for this, is that even possible?

Solution

Since I was trying to apply CSS to <select> and <option> tag in an Angular project, I used the mat(Material) library to implement it.

I found out we can either use the ::ng-deep selector to overwrite the mat tags or we can write encapsulation: ViewEncapsulation.None in the .ts file of that respective component

For more detailed info on ::ng-deep see this post -> How and where to use ::ng-deep?

For more detailed info on encapsulation: ViewEncapsulation.None see this post -> When and why should we use View Encapsulation in angular