Learn CSS borders in 4 minutes! 🖼

hey how's it going everybody in today's video I'm going to explain borders in CSS we'll need some sample elements to work with I recommend creating an H1 header tag type in maybe your name and a paragraph we'll need a pair paragraph tags I'll generate some text by typing lorem then hitting tab let's go to our CSS style sheet let's add a border around our H1 element H1 curly braces we can select a border Style with the Border Dash style property first we have solid our border is a solid line there is dashed we have a dashed line dotted double for a double border Groove Ridge inset outset or none if something has a border naturally you can remove it let's pick a solid border you can change the width of the border with the border with property border Dash width by default it's one let's increase that to two or even three four five border width is for the Border thickness I think three would be good for this example you can change the color with the Border color property then pick a color I'll use the built-in Color Picker and use hsl values let's go with a purple color something like that's good you can even round the corners with the Border radius property border Dash radius the higher the number in pixels the more rounded the corners are going to be that's five this is ten fifteen twenty okay just out of curiosity what if we do like 100 okay it seems like there's a maximum you can only round at the corner so far so it looks like the max is 20. all right there's also a shorthand syntax in place of listing three different properties for the style width and color we can do that all at once let's eliminate these three lines we'll use shorthand syntax for the Border I would like three pixels solid then I'll list a color and use the Color Picker again I would like purple I don't quite remember what we had but it was something like that yeah that is the shorthand syntax you type border the Border width the Border style then the Border color but border radius is still a separate property let's add a border to our paragraph now we will select the P tag there is directional shorthand syntax if you want just one of the borders let's begin with the bottom border Dash bottom then we can list a border width border style then a color and this would only apply to the bottom border of our paragraph let's go with three pixels solid then red but I'm going to pick a more specific kind of red there we go so that is border bottom we're only applying a border to the bottom of our element then there's border top border Dash top let's go with three pixels solid again then a color I'll go with yellow there we are border left three pixels let's try dotted this time then orange that's good then border right border Dash right three pixels dotted again then I will pick Green maybe like a light green there we are then we'll set the Border radius as well this would apply for all of the borders let's try 10. not bad alright everybody that is how to create CSS borders

Channel: Bro Code

Views: 7,559

Keywords: CSS border, CSS borders, CSS tutorial, CSS course, HTML CSS

Id: pkNdQ7TmxIw

Length: 4min 26sec (266 seconds)

Published: Thu Sep 21 2023