Styling the html input to have round border-CodePudding

I have a input box which using the x button to clear the filed. But with adding this addition attribute to the input box the border of the input has two styles now.

In the below image the input box right border is round where as left border is straight. How I can make the border style round for both side?

code:

<div >
<div >
    <input type="text"  id="basic-url" aria-describedby="basic-addon3">
    <span id="searchclear3"
       
       style="pointer-events:auto; text-decoration:none; cursor:pointer;"
       onclick="$(this).prev('input').val('');return false;">
    </span>
</div>

CodePudding user response：

There are several ways:
You can use the simplest css

input {
  border-radius: 50px; /*If it doesn't work add !important*/
}

Or a js code

const input = document.querySelector('input');
input.style.borderRadius = '50px';

Or you can use a bootstrap class that is already preset (I see you are using bootstrap 4)

form-control-rounded

In this way:

<input type="text"  id="basic-url" aria-describedby="basic-addon3">

CodePudding user response：

Use the CSS property border-radius to style it.

It has four values for each side, however, if only one value is passed, it will set it to the entire border.

Therefore, the CSS should look similar to this:

#form-control {
    border-radius: 10px;
}