Cascading Style Sheets 3.0 Tutorial

Rounded Corners with border-radius

It is easy to create rounded borders using CSS3. The property that does this is border-radius. For example:

#header {
	background: #369;
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	border-radius: 15px;
}

Document Heading

It is possible to specify each corner separately. The values run clockwise from the top-left corner. The individual properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

#header {
	background: #369;
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	border-radius: 25px 50px 0 75px;
}

Document Heading

This example is synonymous with the previous one.

#header {
	background: #369;
	border: 1px solid #333;
	padding: 25px;
	text-align: center;
	border-top-left-radius: 25px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 75px;
}

Document Heading

Overflow Property

The overflow property has four values: visible, scroll, auto, and hidden. The difference between scroll and auto is that scroll has scrollbars present all the time while auto only shows scrollbars when they are necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.

<< < [Page 9 of 15] > >>