changing div border radius makes part of border disappear - css

Question

I am trying to give one of my container divs rounded edges, using the border-radius property. However, when I do this, the textareas that are being rendered within the container div block the bottom left and right corners of the div. How can I adjust my css such that this no longer happens, and that the text areas work the way I want?
App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
render() {
return (
<div className="screenDiv">
<div className="topContainer">
<div className="textContainer">
<div className="textBoxes">
<div className="leftTextBox">
<textarea className="myText" />
</div>
<div className="rightTextBox">
<textarea className="myText" />
</div>
</div>
<div className="languageDisplay">
<div className="inputLanguage">
<p>English</p>
</div>
<div className="outputLanguage">
<p>Spanish</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
App.css
.screenDiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.topContainer {
height: 80%;
}
.botContainer {
height: 20%;
border-top: 1px solid black;
}
.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
width: 100%;
display: flex;
justify-content: space-between;
}
.textBoxes {
height: 50%;
position: relative;
top: 50%;
border: none;
display: flex;
}
.textContainer {
width: 80%;
height: 36%;
position: relative;
top: 30%;
left: 10%;
right: 20%;
border: 1px solid #161515;
display: flex;
justify-content: space-between;
border-radius: 3%;
}
.languageDisplay {
height: 50%;
position: absolute;
top: 0%;
bottom: 50%;
display: flex;
justify-content: space-between;
}
.inputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
left: 20%;
}
.outputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
right: 20%;
}
.leftTextBox,
.rightTextBox {
width: 50%;
height: 100%;
display: inline-block;
border: none;
}
.myText {
box-sizing: border-box;
width: 100%;
height: 100%;
border: none;
}

Answer 1

As you are adding a border-radius to your <div />, it is actually "curving in" on the space the div has which is causing the text area inside to overflow the container.
There are two ways I can see to deal with this. You could add a padding to the textContainer div:
padding: 1rem;
Or you could hide all overflow - meaning the inner text area would be hidden instead of being placed over the border of the textContainer div.:
overflow: hidden;
This should keep the border intact.

Answer 2

If you provide some padding to .textContainer, it will solve your problem.

Answer 3

You can also add border-radius to your textboxes if you do not want to give padding to .textContainer