CSS3 Tutorial: border-radius

Rounded corners

Using CSS3 we are able to create rounded corners without the need for background images.

border-radius

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
//For example:
border: 2px solid black;
border-radius: 20px;

Example 1: textbox with rounded corners (see image 1)

De HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <title>Hallo mijn eerste HTML5 pagina!</title> <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="roundedborder"> <h3>Rounded corners</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.</p> </div> </body> </html>

The CSS



/* Rounded corner */
#roundedborder {
	margin-left:20px;
	width:190px;
	float:left;
	border: 2px solid black;
    border-radius: 20px;
    background-color: #ffc;
	padding:15px;
}
tekstkader met afgeronde hoeken
image 1. Textbox with rounded corners

Leave a comment