Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy Oval Image Mask With CSS

Oval image mask with CSS

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:
• Create Animated Glowing Text
• Using the HSL Color Specification
• Code to Move the Scrollbar to the Left Side
• Add Drop Shadows to Your Pictures
• CSS Transition Code For a Pulsating Button
• Style Your Imagemap Tooltips
• How to Use a Starburst on Your Web Page
• Make a Fixed-width Variable-height Round Cornered Box
• Code for Horizontal Drop-down Menu Bar
• The CSS Box Model

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268