Border-radius allows you to create rounded corners with just CSS without the need for graphics or JavaScript. If you are not using it yet here's an explanation.

Table of contents

Rounded corners

Historically rounded corners were tricky to implement involving a background graphic or even JavaScript. Interface designers would issue a little sigh as designers littered designs with rounded corners. Well not any more!

Corners for all

Now you can create rounds corners easily using CSS. There is a bit of variance between browser vendors at the moment but I imagine eventually the syntax will standardise. To add rounded corners you just need:

Validation!

True - this won’t validate with CSS 2.1 validators simply becuase this isn’t CSS 2.1. If you are a validation obsessive then I suggest putting these rules in a separate CSS3 file. If you can’t handle having *any* non-validating code on your site then you’d better wait a bit longer.

Demo

Tags

Recent Posts

Using HashiCorp Vault with LDAPHow to use HashiCorp Vault to setup an LDAP backed secret store with read-only access for users in groups and read-write access for specific users

Linux and Unix xargs command tutorial with examplesTutorial on using xargs, a UNIX and Linux command for building and executing command lines from standard input. Examples of cutting by character, byte position, cutting based on delimiter and how to modify the output delimiter.

Copy a file in GoHow to copy a file in Go. The ioutil package does not offer a shorthand way of copying a file. Instead the os package should be used.

About the author

George Ornbo is a hacker, futurist, blogger and Dad based in Buckinghamshire, England.