Rounded corner CSS without images
Lot of webdesigners uses rounded corner tables and divs to display information on the webpage. Not only it looks sleek but also eye appealing. The problem with coding such DIVs is that there is no standard way of rounding off the corners available in CSS (till now). Designers overcome this problem by using corner images to display around a DIV to make it look rounded. But this approach is not always advisable as it makes the code tedious. There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer. Add following CSS attributes to your element to make its corner round. 
selector {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid;
}

Code language: CSS (css)
To make only Top Left corner rounded, use following CSS. 
selector {
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border: 1px solid;
}

Code language: CSS (css)
Similarly use topleft, top-left, bottom-right, bottomright etc for rounding off the corners of the DIV.

Online Demo

Click here to view Demo

View Comments

  • So it looks like your examples are images, instead of rendering the actual rounded corners. What does this look like when rendered in IE. You should put a link to an example page so users can quickly view in different browsers.

  • @Brandon: Thanks for the comment. I have added the Demo link at the end.

    @John: I have already mentioned that this technique will works only in CSS3-compatible browser and will not work in Internet Explorer. Also have added Demo page link so that you can check this in different browser.

  • A great tutorial, i would deffinately use this if IE accepted it as well, IE is so frustrating to work with!

  • @Liam, Although being most used browser, IE some how is frustrating for web developers :).. I have always a hard time keeping things compatible with IE..

Leave a Comment
Share
Published by
Viral Patel
Tags: CSS rounded corner
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago