How To Make A Website Have Rounded Borders/Corners using CSS
Loading...
Uploaded by idreamofyou1989 on Dec 21, 2009
A lot of web 2.0 design is rounded corners even here on YouTube - has rounded corners on there borders. A simple line of CSS code is all that it takes, so take a quick look at what you need.
1. Build your website if it's not already built
2. Add these three lines of code into your CSS in your site editor. border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
3. Save your document and preview your site!
Link to this comment:
Uploader Comments (idreamofyou1989)
All Comments (16)
-
Super! the shortest and easiest tut for rounded corners. cool
-
Thank you so muchhhhhhh
-
OMG thank you so much! This is so much easier than doing it with images! thx
-
this is only compatible in firefox any fixes?
-
Can u pls tell me which is the soundtrack which plays in this video?
-
hey, can u write down the code here coz it is not clear on ur video..
47:00CSS Tutorial: Build A Homepageby esarantopoulos7,406 views
- 7:49CSS Styling rounded corners and shadowby 360creations2,486 views
- 3:39How to create beautiful ,beautyful tables in dr...by path2learn3,250 views
- 3:27Best Practices in Website Layoutby kutendatv6,012 views
- 1:36Rounding Rapby MrAguilarTX31,762 views
- 1:24What is CSS?by websmarttv3,608 views
- 4:1906 Dreamweaver - border, padding, background an...by sat0022,560 views
- 6:25How to create CSS boxes with rounded corners fa...by ExtendStudioVideos18,330 views
- 2:33FlexiPanels CSS for Dreamweaver quick tourby ExtendStudioVideos16,523 views
- 9:58CSS Introduction - Part 1by TutorialClarity3,088 views
- 8:27Dreamweaver CSS create rounded corner webpage w...by thinkdreamweaver4,019 views
- 2:17CSS: rounded cornersby vageez283 views
- 12:21CSS Part 4 (of 5): External Style Sheetsby freetutorials16,884 views
- 5:20HTML: Tables - Tutorial #10by PhotoMusicTutorials6,469 views
- 4:2411_08 Custom Borders (Dreamweaver cs4 - Working...by elmondom960 views
- 7:57Rounded Corners using CSSby tomrogers1239,161 views
- 11:40CSS Part 3 (of 5): Class and ID Elementsby freetutorials16,431 views
- 8:31How to Make CSS Layouts With Blueprint, a CSS F...by webholevids23,250 views
- 4:30Understanding css (Cascading Style Sheets)-Vide...by stevecope21,145 views
how is this done for IE?
russellsmckinney 3 weeks ago
@russellsmckinney the first line border-radius: 10px; should take care of it for IE - older browsers (anything under 7) most likely doesn't work. Check it out, and let me know, but I believe it should be all good.
idreamofyou1989 3 weeks ago
hey, can u write down the code here coz it is not clear on ur video..
luck2050 1 year ago
@luck2050
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
idreamofyou1989 1 year ago
you're welcome it is no problem!
idreamofyou1989 2 years ago