CSS Tutorial | Border in CSS | HTML CSS Tutorial #18
In this tutorial, you will learn about border properties in CSS.
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Style:
The border-style property sets the line style for all four sides of an element's border.
This property is a shorthand for the following CSS properties:
border-bottom-style
border-left-style
border-right-style
border-top-style
The border-style property may be specified using one, two, three, or four values.
When one value is specified, it applies the same style to all four sides.
When two values are specified, the first style applies to the top and bottom, the second to the left and right.
When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Border Width:
The border-width property sets the width of an element's four borders. This property can have from one to four values.
Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.
CSS Syntax: border-width: medium|thin|thick|length|initial|inherit;
Border Color:
The border-color property sets the color of an element's four borders. This property can have from one to four values.
Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.
CSS Syntax: border-color: color|transparent|initial|inherit;
Border Radius:
The border-radius property defines the radius of the element's corners.
Tip: This property allows you to add rounded corners to elements!
This property can have from one to four values.
Here are the rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:
********************** T I M E S T A M P S **********************
00:00 - Intro
04:15 - Border Style
13:22 - Border-width
15:28 - Border Color
17:00 - Border Shorthand
18:55 - Border Radius
22:53 - Summary
❇️ I will upload a complete HTML& CSS Tutorial for absolute beginners. If you are entirely new to programming this will give you a step-by-step guide to learning Web Development.
So, subscribe to get notified 🙂 ❇️
Please leave a remark if you have any questions, comments, or feedback, and I will respond as soon as possible. Also, please tell me what you'd like to learn about web development.
#webdevelopment #softwaredevelopment #coding #codersutopia #programming #codewithsatyam
✅ Connect with me
on Youtube: / @codersutopia4589
on Instagram: / codersutopia
Happy Coding :)
Nesta página do site você pode assistir ao vídeo on-line CSS Tutorial | Border in CSS | HTML CSS Tutorial #18 duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Coders Utopia 19 Agosto 2022, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 80 vezes e gostou 8 espectadores. Boa visualização!
