HTML Textarea style scrollbar corner borders - html

Question

I am trying to style the Textarea's resizer in the dark mode of my website so that it is not a white block in an otherwise dark website. As such, I tried to both use ::-webkit-scrollbar-corner and ::-webkit-resizer, although the first one leaves white corners (see screenshot), while the other one removes the characteristic two lines from the resizer. I know these changes will affect only Webkit and Blink based browsers, thus not IE, older versions of Edge and Firefox. Is there a way I can style ::-webkit-scrollbar-corner to avoid having those white corners? I want to avoid adding custom wrappers with custom scrollbars as much as I can, as it would take me way longer and add unnecessary complexity.
Here is a minimal example to reproduce the issue:
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
textarea {
background-color: black;
color: white;
}
<textarea>
Hello
World
</textarea>
Update: To clarify, I still need the textareas to be resizable, I want to know if there is a way to remove the white top and left borders from the resizer without styling ::-webkit-resizer which would mean using an SVG to have the two lines typical of the resizer, as in the image.

Answer 1

It's because the textarea can be resized, so the bottom right corner is resizing box.
You can remove it by setting the resize property of textarea as none;`
I think you can do like this.
::-webkit-scrollbar-corner {
background-color: red;
}
::-webkit-scrollbar {
background-color: green;
}
::-webkit-scrollbar-thumb {
background-color: #002200;
border-radius: 20px;
border: 3px solid transparent;
background-clip: padding-box;
}
textarea {
background-color: black;
color: white;
resize: none;
width: 100%;
height: 100px;
}
<textarea>
Hello
World
</textarea>