Border radius
|
This circle to our left is created all with CSS. The code looks like this:
<style> #circle { width:100px; height:100px; background-color:#333; border-radius:50%; } </style> <div id="circle"></div> |
For the past modules, we've been working with CSS box model, and most time we'be been literally working with a sharp edge box. But it doesn't really mean our HTML and CSS world is just square and rectangular. Using CSS declare border-radius can help us to create rounded cornered "boxes" even circles. This is how:
With CSS you can play with border property to create all different shapes.
Here is a link shows you how to make other shapes, all playing with borders. http://www.1stwebdesigner.com/create-different-shapes-css/
For those of you who needs to make irregular shaped layout: http://sarasoueidan.com/blog/css-shapes/index.html
Here is a link shows you how to make other shapes, all playing with borders. http://www.1stwebdesigner.com/create-different-shapes-css/
For those of you who needs to make irregular shaped layout: http://sarasoueidan.com/blog/css-shapes/index.html