Making Rounded Corners using CSS3, without any image

We have used images to make corners round and smooth earlier, but now it is possible with the help of simple coding in CSS. In CSS3, you can easily create rounded borders using border property and apply on any element with or without borders. If one needs only single corner to be rounded or two or all four corners, you can do it individually using border-radius syntax. Almost each and every browser, support this border property using some browser based prefixes.

Round Corner in CSS3 Best Examples

  • -webkit- (for Webkit based browser Chrome & Safari)
  • -moz- (Mozilla )
  • -ms- (Internet Explorer)
  • -o- (Opera)

-moz- prefix has been removed by Mozilla during their browser evolution period and only border-radius works fine. There are four rounded corner values of this border-radius property of CSS3. First value applies on top-left, second value applies on top-right, third value applies on bottom-left, fourth value applies on bottom-right.

Round corder in css3

Example 1: Both side corners to be round

HTML

CSS

Example 2: Only top left corner to be round

HTML

CSS

Example 3: Two side corners to be round (top left and bottom right)

HTML

CSS

Example 4: Both side corners to be round with different values

HTML

CSS

Example 5: Both right side corners to be round

HTML

CSS

Example 6: Both side corners to be round with different values and dotted lines

HTML

CSS

June 11, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *