What is the best way to achieve a curved outer edge for a rectangle using CSS?

I am trying to style the header and footer of my website, which is built using a SAAS CMS. Unfortunately, I am unable to change the HTML structure, but I can add custom CSS. My goal is to create curved headers and footers with upward and downward curves. Is it possible to achieve this effect using just CSS? I have attempted using border-radius, but it only seems to work for perfect circles, not irregular shapes.

To demonstrate what I mean, I have created a codeply here.

Here is the HTML code snippet using Bootstrap:

.navbar-top {
  background-color: blue;
}

.navbar-bottom {
  background-color: red;
}
<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>
<div class="container">
  <div class="main-content">
    <p>main elements are here</p>
    <!-- main elements go here-->
  </div>
</div>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>

https://i.sstatic.net/2Edj5.png

cssbootstrap-4

Answer №1

In order to accomplish this task, you can utilize the following code snippet:

.navbar {
  justify-content: flex-start;
}

.navbar-nav {
  flex-direction: row !important;
}

.navbar-top {
  background-color: blue;
}

.navbar-bottom {
  background-color: red;
}

.main {
  border-top-left-radius: 10%;
  border-bottom-right-radius: 10%;
  background: #fff;
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 20px;
}

.main:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: blue;
  width: 100%;
  height: 50%;
  z-index: -1;
}

.main:after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 50%;
  z-index: -1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>
<main class="main">
  <div class="container">
    <div class="main-content">
      <p>main elements are here</p>
      <!-- main elements go here-->
    </div>
  </div>
</main>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>

Answer №2

If you want to give a rectangle a curved appearance in CSS, simply utilize the border-radius property. This useful property enables you to define rounded corners for any element, resulting in the outside edges of the rectangle being curved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

Having trouble with CSS Locator identifying an element in your Protractor Test?

In the Protractor test snippet below, I am attempting to calculate the quantity of div elements using the CSS locator: let list = element.all(by.css('div[class="ag-header-cell ag-header-cell-sortable"]')); expect(list.count()).toBe(11); ...

cssangularjasmineprotractor

Methods for incorporating rtl functionality into Angular Chosen

I am currently using Angular with Chosen (source) and I am attempting to implement right-to-left (RTL) support. Here is my demo, but despite referencing resources, I am encountering issues. The main problem arises when the body element has a dir="rtl" att ...

htmlcssangularjsjquery-chosenangular-chosen

Mixing CSS layers

Applying this particular css: .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/ border:solid 1px #000000; margin: 5px; background-color:#FFFFFF; padding:5px; opacity:0.9;/*For chrome and mozilla*/ ...

csshtmloverlap

The clipPath feature in webkit fails to display correctly

After reading this insightful article, I decided to experiment with applying a gradient clip-path to a simple shape (an O letter converted to curves). To my frustration, the technique worked perfectly in Firefox but failed to render anything in webkit bro ...

csssvgfirefoxwebkit

Firefox won't trigger the `beforeunload` event unless I interact with the webpage by clicking on it

In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...

javascriptjqueryhtmlcssfirefox

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

I'm struggling to create a basic carousel, but for some reason, it's not functioning properly. I attempted to use the sample code provided by Bootstrap's documentation, but it doesn't behave as expected (slides won't transition and ...

javascripthtmlbootstrap-4carouselbootstrap-5

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

csscss-float

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...

javascriptcss

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

http://jsfiddle.net/bUjx7/42/ <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'> </script> <script type='text/javascript'> $(document).ready(function () { $('.fieldreplace ...

javascriptjqueryhtmlcss

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

javascriptjqueryhtmlcsssidebar

Changing the height of a table row using CSS transitions

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

csscss-transitionscss-tablesrow-height

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

How can one append a string of text to the right of each bar? Let's find out!

.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5 ...

javascripthtmlcssd3.js

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascriptandroidcssscroll

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Delete the display:none; attribute to make the item appear on the screen

The following CSS code styles the element: span { position:absolute; float:left; height:80px; width:150px; top:210px; left:320px; background-color:yellow; display:none; //No display ...

jquerycssattributes

Is there a way to remove the ring shadow in TailwindCSS?

Here is a visual representation of the issue I'm facing (refer to the image): Check out the Image After inspecting with Chrome, it seems like the problem is connected to --tw-ring-shadow. I attempted to use classes like ring-0 and ring-offset-0 (men ...

cssreactjsmaterial-uitailwind-cssinput-field

Overriding a CSS property with !important proves ineffective

I need to make adjustments to an old internal page that currently has the following CSS styling: table { font-family: "Arial"; font-size: 13px; text-align: left; border-collapse: collapse; border: 1px solid black; vertical-align: m ...

htmlcss