CSS Tutorial For Beginners 43 - Rounded Corners
ฝัง
- เผยแพร่เมื่อ 19 ต.ค. 2024
- Hey ninjas, in this CSS tutorial we'll be looking at the border-radius property, which allows us to style rounded corners. The border-radius property is now nearly fully supported in all browsers, with the exception of a couple of legacy ones. But to be honest, the border-radius property is a perfect fallback advert for 'who fives a crap' anyway. :).
Peace out, have fun, keep coding & don't forget to subscribe :).
SUBSCRIBE TO CHANNEL - / @netninja
========== CSS for Beginners Playlist ==========
• CSS Tutorials For Begi...
========== HTML Basics Course ==========
• HTML Tutorials For Beg...
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
========== Social Links ==========
Twitter - @TheNetNinja - / thenetninjauk
I’m almost done with CSS! thanks so much!
Awesome :) no probs
@@NetNinja ☺️🤯❤️
Just followed you on twitter! Plug success :)
Cool I love it brother
What are right padding and margin to place the content in the middle of a circle? I have tried with 10px. The circle becomes distorted.
Hi Anna, the problem is that with the “width” and “height” declarations we specify the content area of the element (blue box of the box model in Chrome/Chromium variants) and because of that we cannot place the content in the middle correctly via padding or margins etc. , as far as I know. (There’s possibly an easy solution to that, but I’m a beginner, too.
What worked for me:
1. delete the width and height
Without a set width and height the dimensions of the element are the width of the parent and the height of the content.
2. add “display: inline-block;”
Now the dimensions are the width and height of the content. (width = 76 pixels and height = 18 pixels in my case) Because we need the element to be a square to make a circle out of it, we have to make sure that the dimensions are correct. Assuming we want a square with a radius of 50 again, we have to add padding to the content to end up with a 100*100 square.
3. add “padding: 41px 12px;”
(100 - heightOfContent) / 2 = padding for top and bottom; (100 - widthOfContent) / 2 = padding for left and right
(100 - 18) / 2 = 41 pixels and (100 - 76) / 2 = 12 pixels
After a short google search I found another solution:
add “text-align: center;” and “line-height: 100px;”
Beware that only works with a single line in the content area, because of the line-height. Sadly there seems to be no “text-vertical-align” in CSS.
@@a1do255 Hi, you must be a mathematician. Thank you for your answer. What about margin-top and margin-bottom? I deleted a file I was working on. It seems that I need to start all over again :)
@@knowthyinfinity7255 margin-top and margin-bottom are not necessary for the positioning of the text. The margins govern the positioning of the element in relation to other nearby elements. Glad I could help :)
I tried width & height of 200px
Border radius 400px
& Padding 10px
The circle had came
Can you do border radius with percentages instead of pixels?
Yes you can, anything that uses pixels can also use percentages. You can make circles by using border-radius: 50% and no matter what size the element has, it is always going to be a circle border since it's using percentages.
OMG, you're not following Jimmy Fallon! :D :D