Tag: round

CSS3 Border-Radius & Rounded Avatars

Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to […]
csshead 0 Comments

CSS Rounded Corners In All Browsers With No Images

In this article we’ll walk through getting rounded corners working in all browsers. Firefox, Safari and Chrome are easy with the border-radius property, but we’ll have to jump through some extra hoops to get it working in IE and Opera. After only a few compromises, we will have CSS rounded corners working in all browsers, […]
csshead 0 Comments

Rounded Corners in Internet Explorer

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS. As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded […]
csshead 0 Comments

Using Rounded Corners with CSS3

A few years back, rounded corners became one of the signature design elements of the Web 2.0 trend. Even though they started as a fad, rounded corners are more than simple eye candy. They also have a role in separating or grouping the sections of a page. As CSS3 gets closer to becoming the new […]
csshead 0 Comments

How to stop images breaking rounded corners in Safari

Currently when you place an image or any ‘replaced content’ inside a block with rounded corners set by -webkit-border-radius, the image pokes through the rounded corners on Safari version 4.01 at the time of writing. The expected and desired behaviour is that the image be cropped by the rounded corners. This can be achieved by […]
csshead 0 Comments

CSS – Imageless Rounded Corners

Over the past few years, many web designers have decided rounded-corners improve the layout/usability of their sites. Typically, two techniques are used: using background images with layered elements or simulating rounded corners with elements inserted via JavaScript. Both techniques have a drawback, requiring extra load time for images to download or for JavaScript to execute. […]
csshead 0 Comments