How do I stop my scroll bar from going over round corners?

user_14086447 0
Viewed 432

I am trying to make a form and in one of the textarea input, the scrollbar is going over the round corner. Picture of the scrollbar going over round corner

<!DOCTYPE html>
<html>
<style>
<!--Scrollbar css code-->
        ::-webkit-scrollbar {
            background: none;
            width:14px;
        }
        ::-webkit-scrollbar-thumb{
            background: cadetblue;
            border-radius:10px;
            padding-bottom:40px;
        }
<!--textarea css code-->
textarea {
            font-family: 'Luckiest Guy', cursive;
            color: cadetblue;
            display: block;
            width: 540px;
            border-width: 5px;
            border-left-color: cadetblue;
            border-bottom-color: cadetblue;
            border-right-color: cadetblue;
            border-top-color: cadetblue;
            border-radius: 40px;
            height: 190px;
            font-size: 20px;
            outline:none;
            resize: none;
         }
</html>

css html
1 Answers

One method I would do is provide a outer container and use styles like this.

enter image description here

::-webkit-scrollbar {
  background: none;
  width: 24px;
}

 ::-webkit-scrollbar-thumb {
  background: cadetblue;
  border-radius: 10px;
  padding-bottom: 40px;
}

.textarea-container {
  border: 1px solid cadetblue;
  color: cadetblue;
  display: inline-block;
  padding: 10px;
  border-width: 5px;
  border-left-color: cadetblue;
  border-bottom-color: cadetblue;
  border-right-color: cadetblue;
  border-top-color: cadetblue;
  border-radius: 40px;
}

textarea {
  width: 200px;
  border: none;
  font-family: 'Luckiest Guy', cursive;
  display: block;
  height: 190px;
  font-size: 20px;
  outline: none;
  resize: none;
}
<div class="textarea-container">
  <textarea row="10" col="5">
Long text
Long text
Long text
Long text
Long text
Long text
Long text
Long text
</textarea>
</div>

user_11883220
Related