Curve the corners of the table

I'm having trouble rounding the edges of a table from below, but it seems to be rounding in the wrong way. Can someone advise me on what I should do?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <style>

#outlook a { 
  padding:0; 
} 

body{ 
  width:100% !important; 
  min-width: 100%;
...

My attempt to round the edges resulted in middle rounding as well. How can I ensure that only the edges are rounded properly?

htmlcsszurb-ink

Answer №1

For those looking to apply border radius on both sides of the table, follow these steps:


    .footer .wrapper{
  background: #ebebeb; 
  border-radius:0 0px 0 20px
}
    .footer .last {

       border-radius:0px 0px 20px 0px !important; 
    }

Alternatively, if you do not need border radius on both sides:


    .footer .wrapper{
  background: #ebebeb; 
}
    .footer .last {

       border-radius:0px 0px 20px 0px !important; 
    }

Feel free to experiment with this in my code pen: http://codepen.io/dave_agilepixel/pen/dCKqy

Answer №2

I decided to create a new class called .first and I removed the border-radius from the existing class .wrapper

Check out the CSS code for the newly added class .first

.footer .first {
      background: #ebebeb; 
       border-radius:0px  0px 0px 20px !important; 
    }

Also, introducing another class named .last

.footer .last {
      background: #ebebeb; 
       border-radius:0px 0px 20px 0px !important; 
    }

Take a look at the live demonstration here.

Moreover, here is the accompanying screenshot for reference.

Answer №3

I have assigned the ID leftwrapper to the left container and the ID rightwrapper to the right container. I eliminated the use of border-radius on the main wrapper and applied the following styles to the IDs:

#leftwrapper {
    border-bottom-left-radius: 20px;
}

#rightwrapper {
    border-bottom-right-radius: 20px;
}

View Working JSFiddle Demo

PLEASE NOTE: Certain browsers (such as IE 8 and older versions) do not support the border radius property, so adding a vendor prefix is recommended. The code would then be modified as follows:

#leftwrapper {
    -ms-border-bottom-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#rightwrapper {
    -ms-border-bottom-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

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

The CSS theme toggler for Bootstrap

I am currently working on integrating a style switcher following the instructions provided at . However, when I add a title="" attribute to the CSS link, the CSS file fails to load on the page and the styles revert back to default Bootstrap. I have added ...

javascriptcsstwitter-bootstrap

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

javascripthtmlarrays

The "placeholder" attribute effectively populates the form input in HTML, but when using Angular 2+, the "value" attribute does not fill the input field as expected

Within my Angular UI, I have implemented an edit button that allows users to transform a member's name heading into a form for editing and updating the name. The challenge lies in ensuring that the form is pre-filled with the current name. My issue a ...

htmlangular2-formsplaceholder

Elastic canvas to always match the full size of the container or screen

I am facing an issue with my responsive canvas that should resize to fit the screen window within a div. The canvas is intended to be 1100x1100 but needs to scale based on the screen size while maintaining a square aspect ratio. The problem arises when th ...

htmlcsscanvasbootstrap-4

What is the best way to retrieve the value of a <div> element using AngularJs?

Can anyone guide me on how to retrieve the value of a clicked <div> in AngularJs? <div ng-repeat="y in data"> <span ng-click="showDetails()" ng-model="searchText" >{{ y }} </span><br/> </div> Shown below is ...

htmlangularjs

Attempting to create a JavaScript class within an HTML document

Having an issue with instantiating a JavaScript class in a separate HTML file. The JavaScript class looks like this: class Puzzle { constructor(fenStart, pgnEnd) { this.fenStart = fenStart; this.pgnEnd = pgnEnd; } } module.exports = Puzzle; ...

javascriptjqueryhtmlnode.js

Show/Hide sections of content that transition and rearrange the layout of the page

I have a layout with 9 squares on a page. When clicking on a square, I want a full-width div to appear underneath it, pushing the other squares down. I've tried following a tutorial to understand the JavaScript behind this functionality, but I'm ...

javascriptjqueryhtmlcss

Leverage Bootstrap to apply margins to a container

I'm creating a new blog platform and I need some advice on how to properly position the blog post div in relation to the date div so it displays with the appropriate gaps. https://i.stack.imgur.com/oLbCq.jpg https://i.stack.imgur.com/CqV7b.png Here& ...

htmlcsstwitter-bootstrap

Interact with a shared array across multiple HTML pages using JavaScript

Currently, I am developing a web application that involves pushing values into an array through a JavaScript function on one HTML page and then accessing the same array from another JavaScript function on a different HTML page. Here is the code snippet I ...

javascripthtmlarrays

Guide to setting checkbox events for checked and unchecked states with JQUERY

I am looking to display a Yes message if the Checkbox is checked, and show a No message if the checkbox is Unchecked. <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/titatoggle/1.2.11/titatoggle-dis ...

phpjqueryajaxhtmltwitter-bootstrap

can a table tag without a specified width still be successfully centered?

While learning a trick to center an element, I came across an interesting method. The suggestion was to place the ul element inside a table and set the table's margin left/right to auto in order to center it. However, I found myself wondering why the ...

css

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

After various attempts and research online, I am still experiencing erratic scrolling behavior with the scrollTop function. My goal is to scroll within a specific div when clicking on links. The content of my div: <div id="test" style="height:400px; o ...

javascripthtml

Utilizing the Aladin Lite application within a React application, despite not being specifically designed for React

I am interested in incorporating the Aladin Lite app into my React application. Typically, embedding the app in a div is straightforward when developing a website without React: <!-- include Aladin Lite CSS file in the head section of your page --> ...

javascripthtmlreactjsastronomy

Adjust the color of the button upon hovering with CSS

I'm having trouble changing the text color from white to black when hovering over the button. The code seems fine, but the text color isn't changing. Can anyone help me figure out how to make it work? .main__btn { font-size: 1.2rem; back ...

htmlcss

Disabling the navbar menu on Ruby on Rails occurs when pages are changed

I am facing an issue concerning the responsive navbar functionality on my website. The problem occurs when the screen width drops below 1024px. Initially, the navbar is designed to switch to a responsive mode upon clicking the burger menu, which is impleme ...

javascripthtmlcssruby-on-railsweb

Navigate to a specific assignment labelled as "foo"

My approach to this problem involves using divs with specific titles. <div id="foo"></div> <div id="foo2"></div> <div id="foo3"></div> <div id="foo4"></div> <a class ...

javascriptjqueryhtmlarrays

Simple code styling tool

Seeking guidance to create a basic syntax highlighter using JavaScript or ClojureScript. While aware of existing projects like Codemirror and rainbow.js, I'm interested in understanding how they are constructed and looking for a simple example. Do th ...

javascriptcsssyntax-highlightingcodemirrorclojurescript

Retrieve information from the database and showcase it in a competitive ranking system

Here is the HTML and CSS code for a leaderboard: /* CSS code for the leaderboard */ To display the top 5 in the leaderboard, PHP can be used to fetch data from the database: <?php // PHP code to retrieve data from the database ?> The current ou ...

javascriptphphtmlmysqlcss

Changing the visibility of a div with an onClick event in React

Can anyone help me figure out how to toggle the display of this div on click? I've been struggling with it for a while now. Any suggestions are welcome. https://i.sstatic.net/lPZtN.png https://i.sstatic.net/8Pybg.png ...

javascripthtmlreactjs

I am experiencing issues with the HTML footer not displaying correctly on my website

My GitHub Pages hosted website is giving me trouble with the footer styling. No matter what I try, I can't seem to get the background color to show up: h1 { background-color: #000000; } I'm attempting to create a footer similar to the one at ...

htmlcss