CSS - Giving border-radius to only sides-CodePudding

i am trying to copy a website it has a nav bar with buttons in side, those buttons only have border-radius to sides i tried giving border-radius but my buttons turned into horizontally oval shape

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
height: 40px;
}

</style>
</head>
<body>

</nav>
<nav id="navigationBar">
<button >Islamic</button>
<button >Educational</button>
<button >Arts & Creative</button>
</nav>

</body>
</html>

CodePudding user response：

Maybe not this width & height ratio, but you can adjust it. Good idea is to merge style to css files. With border-top-right-radius and border-bottom-right-radius and value which stands next to them you can modify the shape of the border.

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
    min-width: 100px;
    min-height: 50px;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
}

</style>
</head>
<body>

</nav>
<nav id="navigationBar">
<button >Islamic</button>
<button >Educational</button>
<button >Arts & Creative</button>
</nav>

</body>
</html>

CodePudding user response：

You have to play with border radius. In this case you can use: .options{ border-radius: 0 10px 10px 0; }

CodePudding user response：

giving 15px border-radius would work

.options {
   border-radius: 15px;
}