Outward Border Radius Like Given in Below Picture..

Outward border radius like given in below picture..?

You can give every menu item a top and bottom div to go along with each menu item and then style it to give you your border radius. Look at this example I made for you:

var header = document.getElementById("cont");
var btns = header.getElementsByClassName("containerblue");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}

.container{
  background-color: skyblue;
  width: 300px;
}

.containerblue{
  background-color: blue;
  width: 20px;
  padding-left: 25px;
}

.containerblue.active > .top {
  background-color: blue;
  width: 200px;
  height: 25px;
  border-radius: 0px 0px 25px 0px;
  pointer-events: none;
}

.containerblue.active > .middle{
  background-color: skyblue;
  width: 200px;
  border-radius: 25px;
  padding: 20px;
}

.containerblue.active > .bottom {
  background-color: blue;
  width: 200px;
  height: 25px;
  border-radius: 0px 25px 0px 0px;
  pointer-events: none;
}

.top{
  background-color: blue;
  width: 200px;
  height: 25px;
  pointer-events: none;
}

.middle{
  background-color: blue;
  width: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  cursor: pointer;
  color: white;
}

.bottom{
  background-color: blue;
  width: 200px;
  height: 25px;
  pointer-events: none;
}

<div class="container" id="cont">
   <div class="containerblue active">
    <div class="btn top"></div>
    <div class="btn middle">Search</div>
    <div class="btn bottom"></div>
  </div>
   <div class="containerblue">
    <div class="btn top"></div>
    <div class="btn middle">Contracts</div>
    <div class="btn bottom"></div>
  </div>
   <div class="containerblue">
    <div class="btn top"></div>
    <div class="btn middle">Etc.</div>
    <div class="btn bottom"></div>
  </div>
</div>

CSS transparent curved shape with two rounded sides

Here is an idea using radial-gradient

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}
.box .top {
  height:100px;
  width:150px;
  transform:translateY(-100%);
  position:relative;
  background:#fff;
}

.top:before,
.top:after{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}

<div class="box">
<div class="top"></div>
</div>

Border radius to curve inwards?

Like below example

header {  position: relative;  height: 300px;  background-image: linear-gradient(#ff9d2f, #ff6126);}
h1 {  margin: 0;  padding: 100px 0;  font: 44px "Arial";  text-align: center;}
header h1 {  color: white;}
header:after {  content: '';  position: absolute;  bottom: 0;  left: 0;  height: 30%;  width: 100%;  background: #fff;  border-top-left-radius: 50% 20%;  border-top-right-radius: 50% 20%;  user-select: none;}

<header>  <h1>Header Content</h1></header>
<section>  <h1>Section Content</h1></section>

Flutter Dart - How to make a container with outward borderRadius.circular(20) instead of inward?

you can do this easily using a custom ClipperPath.

Define a custom ClipperPath as given below.

  class CustomClipPath extends CustomClipper<Path> {
  final radius = 10.0;
  final arcHeight = 50.0;
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, size.height);
    path.arcToPoint(Offset(size.width, size.height - arcHeight),
        radius: Radius.circular(radius));
    path.lineTo(size.width, size.height - arcHeight / 2);
    path.lineTo(0, size.height - arcHeight / 2);
    path.lineTo(0,size.height- arcHeight);
     path.arcToPoint(Offset(0, size.height),
        radius: Radius.circular(radius));

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Then you can apply it to any container like shown below.

 ClipPath(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            alignment:Alignment.center,
            color: Colors.blue,
          ),
          clipper: CustomClipPath(),
        )

Sample Image

I am sharing a live demo on the Dartpad, find it here.

How to avoid CSS inheritance to keep linear gradient background color intact?

As I understand it, the aim is to give the box-child element the same background as main - that is to give it that bit of main's background that it is sitting over.

This can be done if we give box-child a pseudo element that sits behind it but has the same dimensions, positioning and background as main and then add a clip-path to box-child to cut out those bits of the pseudo element that aren't within it.

/* give the box-child before pseudo element the same dimensions and same background as main */
.main-box, .box-child::before {
  height: 500px;
  background: linear-gradient(
    180deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(84, 9, 121, 1) 35%,
    rgba(0, 212, 255, 1) 100%
  );
}

.main-box {
  color: white;
  position: relative;
}

.box {
  height: 300px;
  background: red;
}

.box-child {
  height: 150px;
  clip-path: inset(0);
}

.box-child::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

  <div class="main-box">
    MAIN BOX
    <div class="box">
      BOX
      <div class="box-child">
        BOX CHILD
      </div>
    </div>
  </div>

Using border-radius on ul with only giving a radius to the outer li's

Ok, a solution that does work with links: http://www.jsfiddle.net/MDXZG/6/

HTML

<div class="roundbox">
    <h3>Dashboard</h3>
    <ul>
        <li><a href="http://google.com">Voertuigen</a></li>
        <li>Klanten</li>
        <li>Factures</li>
        <li>Boetes</li>
        <li>Onderhoud</li>
    </ul>
</div>

CSS

I've omitted the various border radius specifications for conciseness.

div.roundbox {
    border-radius: 15px;
    width: 120px;
    padding: 10px;
    background: #BEBEBE;
}

div.roundbox ul {
    list-style: none;
}

div.roundbox ul li {
    height: 40px;
    background: #E5E5E5;
}

div.roundbox ul li:last-child
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.roundbox h3
{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    height: 40px;
    background-color: #00BEE5;
}

Outward Border Radius Like Given in Below Picture..