CSS3 has a lot more for web designers to explore, things are now pretty much easier to do with CSS3 along. One of the most used property is rounded borders, which is now mostly used by everyone in their websites and blogs. So here is a video tutorial for learning border radiusproperty in CSS. There are 2 video tutorials, in which you can learn this property easily in Urdu language.
Watch the video tutorials here and I’ll later explain these properties in text as well:
Border Radius tutorial video # 1
Border Radius tutorial video # 2
Hopefully you’ve understood the properties, but the syntax is also given here for more clearance:
<style type=”text/css”>border:4px solid green;border-radius:10px 10px 10px 10px; or just border-radius:10px;-moz-border-radius:10px 10px 10px 10px; or just -moz-border-radius:10px;-webkit-border-radius:10px 10px 10px 10px; or just -webkit-border-radius:10px;</style>
The above one is the simplest syntax of using Border radius property, you can use it with one declaration like: border-radius:10px or you can also define the alignments such as left-radius,right-radius, top-radius and bottom-radius, and that is done by shorten property like this: border-radius:10px 10px 10px 10px. The first value is for top, second is for left, third is for bottom and last one is for right.
And the -moz- extra property is for displaying the rounded borders in Mozila Firefox web browser, because this property is currently not supported by all browsers, so you need to add extra attributes for Mozila and chrome such as -moz- and -webkit-.
If things are not explained pretty much easier then let me know in comment section, also give a great favor by sharing this with your beloved guys.
0 comments:
Post a Comment