Curving a corner with border radius
Curved corners were at one time the Holy Grail of the web design world. It was always possible, but never simple. A designer had a limited number of bad choices to employ to make an element have a curved corner.
Getting ready
This is now achieved without too much fuss with CSS3. The border-radius property is a simple method of creating a rounded corner on an element.
How to do it…
First create your HTML element. This works on any element that can have a border. So let's make a paragraph block of text. You can get filler text at http://lipsum.com.
<p class="rounded"> Lorem ipsum dolor sit amet…</p>
Next add CSS to fill out the paragraph element:
.rounded{ background-color:#ccc; width:200px; margin:20px; padding:20px; ...Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
