Easy Oval Image Mask With CSS
By Stephen Bucaro
To give an image a beautiful oval shape does not require complicated image masking. With the CSS
border-radius property, you can give an image, or any element, rounded corners.
border-radius Syntax
border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> |<percentage> ]{1,4} ]
At first appearance the border-radius syntax seems quite confusing. That's because the
full blown expression can have eight values separated into two groups by a slash. The first four
values before the slash define the horizontal radii for the top-left, top-right, bottom-right,
and bottom-left corner, in that order.
The first four values before the slash define the vertical radii for the top-left, top-right,
bottom-right, and bottom-left corner, in that order. These values can be expressed in any CSS unit
length unit. They can also be expressed as a percentage of the length of the axes of an ellipsis
that forms the corner.
But don't worry, to create a beautiful oval shaped image requires only one value - 50%. With
one value all corners will be rounded equally, and the shape of the oval will depend upon the
aspect ratio of your image. Of course if your image is perfectly square, you'll get a circle.
Shown below is an image tag with inline style to create an oval shape:
<img style="border-radius: 50%;" src="sunrise.jpg" />
More Easy Cascading Style Sheets:
• Using the HSL Color Specification
• Easy Scrollable Area Code
• Style Your Imagemap Tooltips
• CSS Transition Code For a Pulsating Button
• Easy Three-level Expanding Menu Code
• Spice Up Your Web Forms with Color and Graphics
• How to Use a Starburst on Your Web Page
• Use @font-face Rule to Load External Fonts For Your Webpage
• Easy CSS Tabbed Navigation
• How to Overlay Text on an Image
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
