|
Other solutions from Google
On creating rounded content box, they all require manually coding on CSS, HTML, or Javascript. |
|
|
|
Doug's 4 Rounded Corners
Welcome to my 4 Rounded Corners demo page! Two prime examples of the nuvo-cool XHTML + CSS rounded corners.
Simple Corners
Four walls makes a house, four corners makes a rounded rectangle. That's all there is in this example.
This trick uses background images, one for each corner. The focus here is getting it to work in the simplest way possible, without trying to hack fixes together for the benefit of specific browsers. It is designed to just work.
|
|
|
|
| CSS Rounded Box Generator |
|
|
|
|
A Simple, Semantically Correct CSS Box with Clean Code
The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. Oh yeah, and to make sure they could resize while keeping their backgrounds intact. The important relevant XHTML and CSS for the first box on this page is directly below the box.
For success, make sure your background images are large enough to grow however big you need them. The ones used in this demo are 600px tall for the lower div, for example.
|
|
|
Simple Rounded Corner CSS Boxes
In November 2003, I invented an interesting CSS technique for semantic, rounded corner boxes using CSS. What that translates into non-geek-speak is that you get pretty boxes with no extra bulky XHTML markup.
|
|
|
Nifty Corners: rounded corners without images
Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS. Let's start.
The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. This is the markup to get a rounded div.
The technique works even on floated, absolute positioned or percentage-width elements. It fails on element with fixed height, or with padding. Both of the problem could be easily solved with an extra wrapper around the content.
Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width.
|
|
|
|
|
Rounded Box for CSS Compliant Browsers
Method 1: Float, Fill Remaining Space & Relative Positioning
In this demo, the DIVs .ul and .ll are 15x15 left-floating blocks and the remaining spaces at the top and bottom are taken up by the .ur and .lr DIVs (also 15px-tall). This reserves our top and bottom padding area and gives us four targets for the four corner background images. The only thing left to do was minorly adjust the positions of the corners so they moved into the left and right padding areas of the main div and covered up its borders in the corners. This was done via simple relative positioning.
Method 2: Nested Spans w/ Negative Margins
Here the spans .ul and .ll fill the entire width of the div and .ur and .lr are 15x15 blocks nested nested inside of .ul and .ll, respectively and floated right. Negative margins on all corners were used to push our corners into the padding and over the border edges.
Method 3: Absolutely Positioned Spans
Here, each span was placed in its corner using simple absolute positioning (-1px values to cover the border). In this method, padding is needed at all sides of the box, but what's nice is it can be in relative units (1em here).
|
|
|
|
|
Rounded corners in CSS
I was talking to Jesper about the dotted CSS borders trick and the subject of rounded corners in CSS came up so I showed him my method. There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. |
|
|
|
|
Free Round Corner Images for HTML Tables
Ever wanted that rounded corner effect for your HTML tables? It is easy to create the images in your favorite graphics program, but for those that do not own or know how to use a graphics program to create the rounded corner images you see on some websites. These are especially for you!
Each rounded corner image set comes zipped with all four images, a text file with the HTML code to make a table for you to edit to your satisfaction and the Photoshop .psd file for the corner image if you want to edit the images in any way. |
|
|
|
|
CSS and Round Corners: Build Boxes with Curves
One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied.
The above is basically a normal box that has an orange background colour, over which four corner images are superimposed. All these images have been called up through CSS commands.
|
|
|
"Bullet-Proof" Rounded Corners
I started this exercise with a simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners. This worked great in Mozilla 1 and Netscape 6, but not anywhere else. As I fixed bugs in each of the other browsers implementations, I ended up with this code.CSS support in web browsers has improved dramatically since then and I no longer use this technique. Instead I use background-images and wrapper divs as needed.
|
|
|
Rounded corners in CSS
Please Note: You are using a browser with the rendering engine from Microsoft Internet Explorer. To display this demo as intended, you will need to use a more modern browser, such as Opera or Firefox.
Rounded corners in CSS has become sort of a holy grail. The problem with most of the rounded corner techniques is that they require alteration of the HTML document itself, which means that retrofitting it onto an existing design may require a lot of effort.
However, there is a solution that will allow you to retrofit this to existing designs without altering any markup
|
|
|
RoundedCornr with Gradient
This generates code for a box with rounded corners and a color gradient, just like the box surrounding this section. 'Gradient height' determines the distance to make a complete transition from the top color to the bottom color. You can specify any gradient angle between 0 (vertical) and 90 (horizontal) degrees.
|
|
|
Why Do We Love Rounded Corners?
As interface and graphic designers, we border on obsessed with rounded corners. Web developers have gone to great lengths, through the creative use of CSS (and sometimes Javascript) to make the creation of rounded corners as painless as possible. The proposed CSS3 specification even includes properties for rounded corners (Firefox already supports it).
|
|
|
Rounded Corners with CSS and JavaScript
Rounded corners are one of the most frequently requested CSS techniques. As with many things in CSS, there are various ways in which this problem can be approached. In this article, I'll look at the pros and cons of some common techniques and introduce a new technique that utilises both CSS and JavaScript.
|
|
|
Wrapper Insertion Rounded Corners
Wrapper Insertion Rounded Corners is a method for creating the Rounded Corners effect for any div with the class name 'rounded-corner'. This method uses JavaScript and four images for the corners. You can use the same four images while using any color you like as the background.
|
|
