Custom border rounding value for input outline

[AlJoff]

I want to make the input outline field with more rounded borders. I found out from the documentation that the default rounded value for input outline is 0.25rem (4px). I want to set rounded to 0.75rem (12px).
I managed to set the rounded value for input outline to 0.75rem, but for some reason the rounding of the left border does not match the right one, although the style is set absolutely correctly.

On the screenshot you can see that the rounding of the left border differs from the right one. How to fix it?

How to fix it?

My CSS code:

    [data-te-input-notch-trailing-ref] {
        @apply !rounded-r-2xl
    }
    [data-te-input-notch-leading-ref] {
        @apply !rounded-l-2xl
    }

[iprzybysz]

Hi @AlJoff, I recommend you to use class customization - it ensures correct classes change. Check out the Class customization tutorial.

[AlJoff]

@iprzybysz That didn't help. The rounding of the left border is different from the right border. I have already tried a lot of things. Maybe you can give me a code example where the border rounding for input outline is 0.75rem (12px)?

[iprzybysz]

Of course, check out this code:

        <div
          class="relative mb-3"
          data-twe-input-wrapper-init
          data-twe-class-notch-trailing="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-s-0 rounded-e-[0.75rem] group-data-[twe-input-focused]:border-s-0 group-data-[twe-input-state-active]:border-s-0"
          data-twe-class-notch-leading="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-e-0 rounded-s-[0.75rem] group-data-[twe-input-focused]:border-e-0 group-data-[twe-input-state-active]:border-e-0"
        >
          <input
            type="text"
            class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
            id="exampleFormControlInput1"
            placeholder="Example label"
          />
          <label
            for="exampleFormControlInput1"
            class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
            >Example label
          </label>
        </div>

[AlJoff]

@iprzybysz Thanks but it doesn't work. The rounding of the left border is not symmetrical to the right border. To demonstrate this, I set the border rounding to 2rem.

[iprzybysz]

Check out this issue - there is an explanation of how to round off corners in the Input component.