BORDER RADIUS
ROUND THOSE CORNERS!

by Florence W Deems




All the pages in this whole Borders tutorial have a div in the head tag that is included inside a table cell which has border="0", for centering on the screen. The border-top-left-radius property allows you to add a rounded border to the top-left corner. Similarly, adding the border-top-right-radius, the border-bottom-left-radius, and the border-bottom-right-radius will allow you a border with all four corners rounded and with different radii like the ones you see here. Radii are expressed in "em" rather than pixels.

For this page:

Top left = 2em; bottom left = 6em;
top right = 6em; and bottom right = 2em.


Or if you want the radii of all the corners the same, then use "border-radius:2em;" instead.

Remember to include a DOCTYPE tag, such as <!DOCTYPE html>
to start the page, or IE 8 might show peculiar results.




Border Styles Introduction ~ 2 ~ 3
Border Widths
Border Color Introduction ~ 2
Border Radius: Introduction ~ 2
Border Collapse Spacing ~ Pinning an Element
An older Border Playground from 2008


Visit these other Tutorials by Flo

Sunday 22nd of October 2017 03:20:08 PM



by

~~~

Tandem Tooters

Arbor Hosting