fix(select): respect --border-radius with modern template (#27213)

Issue URL: resolves #27208

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->


<!-- Issues are required for both bug fixes and features. -->

The `--border-radius` CSS variable was not consumed in the base select
stylesheet.


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added `--border-radius` usage on `.select-wrapper`. This aligns with
input and textarea implementations:

Input:
dca31f5940/core/src/components/input/input.scss (L285)
Textarea:
dca31f5940/core/src/components/textarea/textarea.scss (L246)
## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/select/select.scss

@@ -190,6 +190,7 @@ button {
 
 .select-wrapper {
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include border-radius(var(--border-radius));
 
   display: flex;
 

core/src/components/select/test/custom/select.e2e.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('select: custom', () => {
+  test('should be able to customize select using css apis', async ({ page, skip }) => {
+    skip.rtl();
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/27208',
+    });
+
+    await page.setContent(`
+      <ion-select label="Select" value="a">
+        <ion-select-option value="a">Apple</ion-select-option>
+      </ion-select>
+
+      <style>
+        ion-select {
+          color: white;
+
+          --background: #0088cc;
+          --border-radius: 20px;
+          --padding-start: 16px;
+          --padding-end: 16px;
+          --padding-top: 16px;
+          --padding-bottom: 16px;
+        }
+
+        ion-select::part(icon) {
+          color: white;
+        }
+      </style>
+    `);
+
+    const select = page.locator('ion-select');
+    await expect(select).toHaveScreenshot(`select-custon-diff-${page.getSnapshotSettings()}.png`);
+  });
+});