Scroll shows above css textarea

Question

I've created a <textarea> of a fixed size that allows users to scroll within it. The problem is that for some reason the scroll displays above rather than below and inside the edges.

textarea {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    min-height: 120px;
    max-height: 120px;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>

Any ideas how to make the scroll bars behave more properly? There's also the issue with padding on the right changing when there's a scroll bar visible.

PS: This isn't a duplicate of Rounded corners on a textarea with a scrollbar from six years ago. The question doesn't have any answers that approach the issue I'm facing. Nesting within a DIV isn't something that works effectively within the form element. I just wish to have the scroll bar below the border-radius.

Just to be absolutely clear, I'm looking to do something like this (created in Photoshop as an example)

Does this answer your question? [Rounded corners on a textarea with a scrollbar](https://stackoverflow.com/questions/17843455/rounded-corners-on-a-textarea-with-a-scrollbar) — showdev, Jun 04 '20 at 18:47
I saw that question, it didn't solve the issue because I don't want to set custom scrolling unless there's an easy way to do this? — learningtoanimate, Jun 04 '20 at 18:50
The [idea I'm considering](https://stackoverflow.com/a/17843581/924299) is to put the border and radius on a containing `
` rather than the ``. It's not ideal, but it might be helpful. Here's a [demonstration](https://jsfiddle.net/3d5eogh8/). — showdev, Jun 04 '20 at 19:01

M.A Shahbazi · Answer 1 · 2020-06-04T19:11:35.857

How about using a container for your textarea and applying border to that?

.textarea-container {
    width: 250px;
    height: 300px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
}
textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<div class="textarea-container">
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>

Edit: After checking your ideal appearance I realized you want the overflow of the scrollbar to be hidden, so you can define overflow: hidden on textarea container and get rid of padding by setting it to padding: 0

That would be closer but it's still not ideal given the padding between the text and the border as well as scroll. I've updated my question with an ideal appearance. — learningtoanimate, Jun 04 '20 at 19:00

score 3 · Accepted Answer · answered Jun 04 '20 at 19:26

The initial answer from M.A Shahbazi came closest to solving the question and then did. The answer from Artur helped too. Some of the CSS in that answer is off because you come into an issue with the <textarea> not having the same height as its container. Below is the CSS I settled on for anyone who comes across this question in the future and would like to see the final approach. I accepted the answer from M.A Shahbazi because it was closest and needed only a few adjustments. The main ones being the actual sizing, they needed to all have the same size in order to match up. And look more like this: than this:

.textarea-container {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    margin-bottom: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
}

textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    max-height: 200px;
    padding: 15px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<div class="textarea-container">
<textarea></textarea>
</div>

Jasleen Bakshi · Answer 3 · 2020-06-04T19:07:36.397

textarea {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    min-height: 120px;
    max-height: 120px;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}
.box-content {
  height: 120px;
  width: 40%;
  overflow: auto;
  border-radius: 29px;
}

div.disabled {
    overflow-x: hidden; //horizontal
    overflow-y: scroll; //vertical
}

You can also customize your scrollbar

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

I'm not too sure that's doing anything. Where would you put it? — learningtoanimate, Jun 04 '20 at 18:44
I've tried that and it worsens the issue, I don't want to have horizontal scrolling within the `` tag. I'm open to having custom scrolling but it should be behind the border. — learningtoanimate, Jun 04 '20 at 18:52
so you can create a new div class which should get rid of the horizontal scrolling and will only show the vertical (edited answer) — Jasleen Bakshi, Jun 04 '20 at 18:55

Raydoan Anik · Answer 4 · 2020-06-04T19:09:32.520

Just wrap your textarea within a div and give some style on into div. Also remove the rows attribute from the textarea. To see the result check my codepen link here.

div {
      border: solid 5px transparent;
      border-radius: 30px;
      width: 40%; 
      min-width: 40%;
      max-width: 40%;
      height:120px;
      box-sizing: border-box;
      max-height:120px;
      background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
      background-origin: border-box;
      background-clip: padding-box, border-box;
  overflow:hidden;
}

textarea {
    height:100%;
    width:100%;
    padding:10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border:none;
}

Artur · Answer 5 · 2020-06-04T19:11:44.137

I think the only solution would be to wrap your textarea in container and apply your styles on the container:

div {
  width: 40%;
  min-height: 120px;
  max-height: 120px;
  padding: 20px;
  display: inline-block;
  outline: none;
  box-sizing: border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
}

textarea {
  position: relative;
  flex: 1 0 auto;
  margin: -20px;
  padding: 20px;
  width: 100%;
  resize: none;
}

<div>
    <textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>

This is the closest answer I've seen so far. The only issue in this case is the lack of padding within the actual textarea. — learningtoanimate, Jun 04 '20 at 19:04

Scroll shows above css textarea

5 Answers5