CSS Rounded Corners Techniques

CSS Rounded Corners Techniques

 

CurvyCorners

CurvyCorners
A free JavaScript library for creating gorgeous rounded corners for HTML block elements i.e. DIVs. Supports anti-aliasing, borders and background images.
CurvyCorners is designed to fill a gap in modern browser support for rounded corners on block elements while we wait for CSS3 to be finalised and supported by all browsers.
Currently Firefox, Safari and Chrome have limited support for the proposed CSS3 border-radius selector.

Even More Rounded Corners With CSS

Even More Rounded Corners With CSS
Given the use of alpha transparency throughout, elements with background images may not overlap. Therefore, a few hook elements and positioning are used to provide the required "slices" which make a complete, fluid image.

Rounded corners in CSS

Rounded corners in CSS
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.

Transparent custom corners and borders, version 2

Transparent custom corners and borders, version 2
Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders.

Transparent custom corners and borders

Transparent custom corners and borders
Have you ever wanted to make a resizable box with rounded (or any shape) corners, custom borders, and a transparent shadow? Did you also want to do that without cluttering your markup with a bunch of non-semantic div elements? Now you can.

Flexible box with custom corners and borders

Flexible box with custom corners and borders
Galleria is an image gallery framework, written in JavaScript. The aim is to simplify the process of creating visually appealing image galleries for the web and mobile devices.
Galleria is not created from one single use case. Instead we created a collection of tools based on common feature requests that we can use to create multiple themes based on the same core.

Simple Box by tedd

Simple Box by tedd
Dries pointed me to a nifty article which shows how to add rounded corners dynamically through JavaScript, without requiring images.
While the idea is cool, the implementation was rather limited, as the corners still had to be specified in CSS by hand.

CSS Teaser Box, fixed width, one image

CSS Teaser Box, fixed width, one image
Just a little something that may be of use to someone. It’s pretty common for websites to have “teasers” that show an excerpt of a full article or document.

CSS Liquid Round Corners

CSS Liquid Round Corners
We won't be doing anything new or clever - just basic construction techniques that will produce a re-usable round box that you can then optimize and re-develop at your leisure. The first thing you need to know is that until css3 is fully supported then the only realistic way to do this at present is to use images.

Anti-aliased Nifty Corners

CSS Liquid Round Corners
Dries pointed me to a nifty article which shows how to add rounded corners dynamically through JavaScript, without requiring images.
While the idea is cool, the implementation was rather limited, as the corners still had to be specified in CSS by hand.

CSS and round corners: Making accessible menu tabs

CSS and round corners: Making accessible menu tabs
CSS, as usual, comes to our rescue. Look at this menu tab, created through HTML and CSS - not an <img> tag in sight: Home4
Adjust the text size in your browser now. Go on, do it. Did you see how the menu tab increased in size with the text and it all fits perfectly. Today, you're going to learn how to do this.

CSS and round corners: Borders with curves

CSS and round corners: Borders with curves
In our previous CSS article, CSS and round corners: Boxes with curves1, we outlined a method for creating boxes with rounded corners through the power of CSS. A similar technique can be applied to making borders with round corners.

Mountaintop Corners

Mountaintop Corners

Resizable box with freely stylable corners and surface

Resizable box with freely stylable corners and surface
All these boxes resize with the text or any other content that's contained in them.
Depending on the extent of resizability you want to offer, background graphics have to be larger or smaller.

Mike’s Experiments - CSS: Smart Corners

Smart, Round Corners
While several solutions exist for making round corners on boxes, most I feel just aren’t simple enough. Some use JavaScript — which is fine — and others use CSS with no images. This method uses CSS and small images. Of all the methods, I feel this is the most practical solution.

Lean and Clean CSS boxes...

Lean and Clean CSS boxes...
The 3 "rounded" boxes below are contained in the same DIV (a "float").
If we're setting a width for this element it is not only because "every float should have a width" but because doing so gives the boxes a fixed width without actually declaring any at their level (the "rule of thumb" to dodge the IE5 broken box model is that one can freely declare border and padding for an element as long as that element does not have a size specified).

Broader Border Corners

Broader Border Corners
A quick and easy recipe for turning those single-pixel borders that the kids love so much into into something a little less right-angled.
Here’s the principle: We have a box with a one-pixel wide border around it. Inside that box is another box that has a little rounded-corner background image sitting snugly in one of its corners. The inner-box is then nudged out a bit so that it’s actually sitting on top of the outer box. If it’s all done properly, that little background image can mask the hard right angle of the default border of the outer-box, giving the impression that it actually has a rounded corner.

Nifty Corners: rounded corners without images

Broader Border Corners
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

Rounded corners in CSS

Rounded corners in CSS

Nifty Corners Cube

Nifty Corners Cube
Nifty Corners Cube are a solution to get rounded corners without images, and this third version is build by three main components:
A javascript file, named "niftycornerscube.js" , A CSS file, named "niftycorners.css", The javascript calls specific for the pages

RoundedCornr

RoundedCornr
Basic RoundedCornr, RoundedCornr with Gradient, RoundedCornr with Border

Spiffy Corners - Purely CSS Rounded Corners

Spiffy Corners - Purely CSS Rounded Corners
Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Spanky Corners

Spiffy Corners - Purely CSS Rounded Corners
'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. It does not require JavaScript to work

Spiffy Box

Spiffy Box

Simple Rounded Corner CSS Boxes

Simple Rounded Corner CSS Boxes

Links:
Source Code - Examples >> Free CSS

Black Friday 2017