Borders in css with example

CSS 3 cascading style sheets

How to apply Borders in css with example


CSS – Cascading Style Sheet In this lecture you will learn The border-style property specifies what kind of border to apply and display. The following values are allowed:  dotted - Defines a dotted border  dashed - Defines a dashed border  solid - Defines a solid border  double - Defines a double border  groove - Defines a 3D grooved border. The effect depends on the border-color value  ridge - Defines a 3D ridged border. The effect depends on the border-color value  inset - Defines a 3D inset border. The effect depends on the border-color value  outset - Defines a 3D outset border. The effect depends on the border-color value  none - Defines no border  hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). Demonstration of the different border styles: p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} for instance borders css examples with source code here: <!DOCTYPE html> <html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <h2>The border-style Property</h2> <p>This property specifies what kind of border to display:</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="none">No border.</p> <p class="hidden">A hidden border.</p> <p class="mix">A mixed border.</p> </body> </html>

in the above shown example applied borders in css to a html tag elements, in this example source code written in div tag is applied on style attribute with parameters are having with their values.
similarly one p tag of html element is also applied for borders

harisystems

css

Web development course Data Science courses: Web Development
Online courseOnline Courses: Include Certification
Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2023 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2023