I’m working on an app whose background is black. The main content area will be a white area. The white area will have rounded corners. For the past couple of years, this app has relied on a single large table. This table had cells that had an image that was created to represent the rounded corners. I’m in the process of updating this app and I wanted to use a more respectable approach. For that reason, I’m seeking some feedback. Basically, my site looks like this:
tab1 | tab2 | tab3
[corner]---------------- --------------------[corner]
| |
| |
| |
| |
| |
... ...
| |
[corner]-------------------------------------------[corner]
I started the update of this app with ASP.NET MVC 4. The template has the following:
<body>
<header>
...
<header>
<div id="body">
</div>
<footer>
</footer>
</body>
In my limited opinion, I felt the upper left/right corners should go in the <header> and the lower left/right corners should go in the <footer>. If i do that, I’m not sure how to make it all line up though. I appreciate any recommendations or code samples anyone can provide. I’m struggling to get this all to line up.
Thank you!
Use the
border-radiuscss property to achieve the affect of rounded corners. For the header for example you might haveExcellent article here and Browser Support here