18 - Managing the Graphical Interface
CSS3 enables you to create stunning graphical elements for Web sites
and applications, which ratchet up the satisfaction of the user experience.
You can create graphics effects such as rounded corners and drop
shadows, and apply 2D and 3D transformations like rotations and 7 scaling.
Transitions and animations, performed completely with HTML and
CSS3, bring life to otherwise static images, boxes, and text.
Rounded Corners
In CSS3, you can add rounded corners to layout elements, including
headers, footers, sidebars, and images. Use the border-radius property along
with a length value, such as pixels, ems, or a percentage.
- the higher the value, the more rounded a corner will be
- some browsers have problems rendering a percentage value
You can round individual corners with the following properties:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
<!DOCTYPE html>
Rounded corners!