25 Rounded Corners Techniques with CSS

* This post is regularly updated. *
Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.

Techniques

ThrashBox - create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup.
http://www.vertexwerks.com/tests/sidebox/

Even More Rounded Corners With CSS - nice technique with fluid rounded corner dialogs and support for borders, alpha transparency throughout, gradients andpatterns.
Even More Rounded Corners With CSS

DomCorners - a very simple technique for getting rounded corners.
DomCorners

virtuelvis.com Rounded corners in CSS - allow you to retrofit this to existing designs without altering any markup.
Rounded corners in CSS

Transparent custom corners and borders version 2 - a technique for creating custom corners and borders with optional alpha transparency.
Transparent custom corners and borders version 2

CSS Teaser Box with rounded corners - by Roger Johansson, the same author of Transparent custom corners and borders version 2.
CSS Teaser Box

News List - was designed to display links to recent news.
news list

CSS Liquid Round Corners - a re-usable rounded box, note that it needs total 6 images for wrap the corners.
CSS Liquid Round Corners

Anti-aliased Nifty Corners - based on Nifty Corners and modified by Steven Wittens.
Anti-aliased Nifty Corners

Simple Box by tedd - another simple rounded corners.
Simple Box by tedd

CSS and round corners making accessible menu tabs - decent rounded corners style menu tabs technique.
CSS and round corners Making accessible menu tabs

CSS and round corners borders with curves - make a rounded corners borders with curves.
CSS and round corners Borders with curves

Airtight Corners - produce a box with rounded corners using only one image, and off-setting that image for each corner.
Airtight Corners

Mountaintop Corners - easier way for creating decent rounded corners.
Mountaintop Corners

Editsite Rounded Corners - need a javascript to create the corners.
http://www.editsite.net/blog/rounded_corners.html

Create a rounded block or design with CSS and XHTML - easily create a rounded block.
Create a rounded block or design with CSS and XHTML

Resizable box with freely stylable corners and surface - resizable rounded corners box.
Resizable box with freely stylable corners and surface

Smart Round Corners - a practical solution to uses small images for markup the corners.
Smart Round Corners

Lean and Clean CSS boxes - need 2 images to wrap the header and box.
http://www.tjkdesign.com/articles/roundbox.asp

Broader Border Corners - a quick and easy recipe for turning those single-pixel borders.
Broader Border Corners

Snazzy Borders - based on Nifty Corners By Alessandro Fulciniti
Snazzy Borders

Rounded corners in CSS by Adam Kalsey - requires 4 corners images.
Rounded corners in CSS by Adam Kalsey

curvyCorners - a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
curvyCorners

Nifty Corners - a solution based on CSS and Javascript to get rounded corners.
Nifty Corners

quinncrowley.com - based upon a combination of pixy and Kalsey
http://www.quinncrowley.com/rounded.htm

Rounded Corners Generators

Online rounded corners generators, Rocks!
http://www.roundedcornr.com/ - the herald of rounded corners generator tool.
http://www.roundedcornr.com/

http://www.spiffycorners.com/ - simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript.
http://www.spiffycorners.com/

http://tools.sitepoint.com/spanky/ - an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup.
http://tools.sitepoint.com/spanky/

http://spiffybox.com/ - another project by the owner of Spiffy Corners.
http://spiffybox.com/

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值