CSS rounded corners

This is a very fast and easy way to make rounded borders in CSS, without having to use images. Setting the round radius is fairly easy and straightforward. As always with CSS, different browsers render the same code in quite different ways. The example below is just meant to get you started.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<style>

div.square {

width: 100px;

height: 100px;

background: #369;

border: #333;

border-radius: 6px;

margin-bottom: 6px;

}

div.pad {

width: 300px;

height: 100px;

background: #969;

border: #333;

border-radius: 8px;

} 

</style>

<div class="square">

</div>

<div class="pad">

</div>

Newsletter

Sign up for inspiration, news and updates