Effect How to - Round bottom left and bottom right border








Question

We would like to know how to round bottom left and bottom right border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.dc-slick {<!--   w w  w. j  av a 2 s .  com-->
  border: 3px solid #F6C;
  right: 0px;
  left: 0px;
  position: fixed;
  border-bottom-left-radius: 30px 30px;
  border-bottom-right-radius: 30px 30px;
  z-index: 10001;
  margin-top: 0px;
  background: black;
}

.dc-slick-content {
  color: white;
  z-index: 9999;
  width: 100%;
  height: 200px;
}
</style>
</head>
<body>
  <div class="dc-slick">
    <div class="dc-slick-content">test</div>
  </div>
</body>
</html>

The code above is rendered as follows: