# Rounded text entry with CSS

**URL:** <https://community.glideapps.com/t/rounded-text-entry-with-css/28456>\
**Category:** Ask for Help\
**Created:** [June 29, 2021, 1:03am UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456 "2021-06-29T01:03:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jorge\_Hernandez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jorge_hernandez/32/25768_2.png) [@Jorge\_Hernandez](https://community.glideapps.com/u/Jorge_Hernandez)\
**Post date:** [June 29, 2021, 1:03am UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/1 "2021-06-29T01:03:07Z")

</div>

Can I make these edges rounded to the “text’s entry’s”?

 ![glide](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/8140587b2bfeed128a2cdafb5b46ea218d3eb476.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 29, 2021, 3:09am UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/2 "2021-06-29T03:09:21Z")

</div>

Something like this?

![Screen Shot 2021-06-28 at 11.08.08 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ffd89c8681e25a6a1b6b23840401ec7c0509f37e.png)

```auto
<pre><span><style>
[data-test="app-text-field"] {
border: solid 2px;
border-radius: 50px;
margin: 10px;
text-align: center;
}

.tf-inner, .shadow-box, .ta-inputbox {
border: 0px !important;
text-align: center !important;
}

```

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [June 29, 2021, 10:32am UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/3 "2021-06-29T10:32:19Z")

</div>

Hi Robert,

Is there a way to have one border while editing and another one for the normal state? I’ve tried with :focus but not worked.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 29, 2021, 1:23pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/4 "2021-06-29T13:23:00Z")

</div>

![Screen Shot 2021-06-29 at 9.22.24 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d98cd0d3522ec705cb90305e06de33e533a82b9b.png)

Try this instead:

```auto
<pre><span><style>

[data-test="app-tf-text-input"] {
line-height: 50px !important;
}

.tf-inner {
border: 0px !important;
}

.shadow-box {
border: 0px !important;
height: 50px;
}

.ta-inputbox {
text-align: center !important;
border: solid 2px !important;
border-radius: 50px !important;
}

.ta-inputbox:focus {
border: solid blue 2px !important;
}

```

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 4:21pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/5 "2022-04-19T16:21:32Z")

</div>

![Screenshot_2022-04-19-21-49-15-10](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c71055cfce7e0ca96213679d5ed6bb428af79d22.jpeg)  
properly Not working .

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 4:24pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/6 "2022-04-19T16:24:18Z")

</div>

what is not working?

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 4:32pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/7 "2022-04-19T16:32:29Z")

</div>

```
[data-test="app-tf-text-input"] { line-height: 50px !important; } .tf-inner { border: 0px !important; } .shadow-box { border: 0px !important; height: 50px; } .ta-inputbox { text-align: center !important; border: solid 2px !important; border-radius: 50px !important; } .ta-inputbox:focus { border: solid blue 2px !important; } This code
```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 4:36pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/8 "2022-04-19T16:36:53Z")

</div>

you are missing top code:

`<pre><span><style>`

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 4:48pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/9 "2022-04-19T16:48:51Z")

</div>

Sir I have using above code (

```
) Still same working . Shadow-box border 0px But Border appears
```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 4:51pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/10 "2022-04-19T16:51:59Z")

</div>

I’m having trouble understanding what you need…

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 5:11pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/11 "2022-04-19T17:11:02Z")

</div>

Like this sir (rounded text entry )

![IMG_20220419_223920](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/7/070eb365ee3d1efca1199a67a469e3277b015c6a.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 5:11pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/12 "2022-04-19T17:11:55Z")

</div>

yes, this code will do that…  
can you post a screenshot of how you apply this code?

 ![Screen Shot 2022-04-19 at 1.14.00 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/23da6df061078171cba4f81df9bb2873d3cb49ec.jpeg)

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 5:14pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/13 "2022-04-19T17:14:51Z")

</div>

![Screenshot_2022-04-19-22-44-22-66](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/2/32cf4eb80748bd1cb927984780e8e2f56504cb79.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 5:15pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/14 "2022-04-19T17:15:55Z")

</div>

and is not changing the entry field?

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 5:25pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/15 "2022-04-19T17:25:51Z")

</div>

![Screenshot_2022-04-19-22-54-12-59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/9221c79fa604b1d990ccd4c520d4e2212beaa42c.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 5:27pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/16 "2022-04-19T17:27:01Z")

</div>

you wanna take out the backround?

---

<div class="post-metadata">

**Author:** ![srinivas\_sri](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/srinivas_sri/32/53048_2.png) [@srinivas\_sri](https://community.glideapps.com/u/srinivas_sri)\
**Post date:** [April 19, 2022, 5:27pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/17 "2022-04-19T17:27:50Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 19, 2022, 5:29pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/18 "2022-04-19T17:29:44Z")

</div>

.input-wrap{background-color:transparent}

---

<div class="post-metadata">

**Author:** ![AugustoMiguel](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/augustomiguel/32/47516_2.png) [@AugustoMiguel](https://community.glideapps.com/u/AugustoMiguel)\
**Post date:** [October 2, 2022, 3:10pm UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/19 "2022-10-02T15:10:31Z")

</div>

Hi @Uzo !!  
Is there a way to remove that black border when :foucs?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [October 3, 2022, 12:58am UTC](https://community.glideapps.com/t/rounded-text-entry-with-css/28456/20 "2022-10-03T00:58:18Z")

</div>

yes:

```auto
<pre><span><style>
.input-wrap{
background-color:transparent !important;}
.focused .input-wrap{
box-shadow:none !important;}

```

[Next page](https://community.glideapps.com/t/rounded-text-entry-with-css/28456.md?page=2)