CSS - Borders
Learn css - css tutorial - CSS Borders - css examples - css programs
Border CSS - Definition and Usage
- In css borders allows you to identify the style, width, and color of an element's border.
- The borderproperty is used to apply the individual border values in a single place in the style sheet.
- Border can be used to set the values for one or more of: border-width, border-style, border-color.
- Border is a box around the element or a container.
- In CSS, border properties allows us to define the style, width, and color for an element's border.
Types of Border Property :
- There are three different types of properties in CSS border they are :
Border Width :
- The border-width property defines the width of the four borders around an element.
- The width can be set in a specific size (px, pt, cm, em, etc).
- In CSS, We can also use one of the three pre-defined values : thin, medium, or thick.
Sample coding - css in html
Code Explanation - html css style
- In CSS, applying the border width : thin property for <p> tag states that the width is thin and style of the border is solid.
- Similarly, applying border width : thick for an element displays thicker and stronger around it than the first border.
- Border width for an element can be specified size (in px, pt, cm, em, etc).Here, we have given 3 pixels (3 px) for the paragraph element (<p>).
Note : Using Inline CSS we are applying a specific styles to a particular element.
Note : We can also specify different styles like dotted, dashed to our border. Which we will learn in the upcoming chapter.
Code Output - online css course
- Here, the paragraph text “Welcome To wikitechy.com” has the thin border around it which is displayed in the browser window.
- The Paragraph “You Can Learn All the Technologies” has the thick border width since we specified border-width: thick in CSS.
- Similarly, border around the text “Best E-Leaning Website in the World.” is specified in pixels a shown.