- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Data Type - <line-style>
<line-style> data type represents the keywords values specifying a line style or lack of line.
The <line-style> keywords are used in the following listed border and column properties:
Possible values
One of the following values is used to specify the <line-style> enumerated type:
none - No line is displayed.
hidden - It is similar to none value, displays no line. An element with a hidden display option won't show any lines (even with width value being specified.). Conflicting borders are concealed when hidden takes precedence, as in the case of table cells or border collapse.
dotted - Displays a series of round dots.
dashed - It displays a series of short square-ended dashes or line segments.
solid - This design displays a single, uninterrupted, solid line that never breaks.
double - Displays two straight, parallel lines that are spaced apart by a predetermined amount, and the total length of both lines is equal to the line's width in pixels.
groove - Displays a border with a carved appearance..
ridge - Displays a border with an extruded appearance.
inset - Displays a border that makes the element appear embedded. It acts as a groove style when applied to a table cell border with a collapsed border-collapse setting.
outset - It displays a border style that elevates or raises the element's look. It functions similarly to a ridge style when used in a table cell with border-collapse set to collapsed.
Syntax
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
CSS <line-style> - Defining Line Styles.
The <line-style> values in the following example correspond exactly to CSS properties like border-style, which define different border appearances like none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.
These <line-style> descriptions provide a wide range of stylistic choices for HTML components, and they tightly regulate how borders appear visually.
<html> <head> <style> div { display: inline-block; margin: 5px; padding: 5px; } p { margin: 5px; font-weight: bold; padding: 5px; border: double 7px #44ebb3; } p + p { columns: 2; column-gap: 10px; column-rule: double 7px; border-color: #727876; } .no-border p { border-style: none; } .hidden-border p { border-style: hidden; } .dotted-border p { border-style: dotted; } .dashed-border p { border-style: dashed; } .solid-border p { border-style: solid; } .double-border p { border-style: double; } .groove-border p { border-style: groove; } .ridge-border p { border-style: ridge; } .inset-border p { border-style: inset; } .outset-border p { border-style: outset; } </style> </head> <body> <div class="no-border"> <p>no-border</p> <p>This is an example of no border</p> </div> <div class="hidden-border"> <p>hidden-border</p> <p>This is an example of hidden border</p> </div> <div class="dotted-border"> <p>dotted-border</p> <p>This is an example of dotted border</p> </div> <div class="dashed-border"> <p>dashed-border</p> <p>This is an example of dashed border</p> </div> <div class="solid-border"> <p>solid-border</p> <p>This is an example of solid border</p> </div> <div class="double-border"> <p>double-border</p> <p>This is an example of double border</p> </div> <div class="groove-border"> <p>groove-border</p> <p>This is an example of groove border</p> </div> <div class="ridge-border"> <p>ridge-border</p> <p>This is an example of ridge border</p> </div> <div class="inset-border"> <p>inset-border</p> <p>This is an example of inset border</p> </div> <div class="outset-border"> <p>outset-border</p> <p>This is an example of outset border</p> </div> </body> </html>
CSS <line-style> - Defining Line Style and Colors
The <line-style> indicates the various border styles that are used in the following example.
Every line style has a corresponding border-color feature that displays a range of colors.
This illustrates the variety of border looks that may be achieved by combining different styles and color combinations.
<html> <head> <style> body { font-family: Arial, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin-top: 20px; } .box { width: 200px; padding: 20px; margin: 10px; } p { margin: 5px; font-weight: bold; padding: 5px; border: double 7px #44ebb3; } .line-example { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 10px; } .line-example .box { flex: 1; margin: 10px; } .line-example p { font-weight: normal; padding: 10px; margin: 0; } .dotted-border p { border-style: dotted; border-color: #FF5733; /* Orange */ } .dashed-border p { border-style: dashed; border-color: #2E86C1; /* Blue */ } .solid-border p { border-style: solid; border-color: #58D68D; /* Green */ } .double-border p { border-style: double; border-color: #D4AC0D; /* Yellow */ } .groove-border p { border-style: groove; border-color: #9B59B6; /* Purple */ } .ridge-border p { border-style: ridge; border-color: #E74C3C; /* Red */ } .inset-border p { border-style: inset; border-color: #3498DB; /* Light Blue */ } .outset-border p { border-style: outset; border-color: #27AE60; /* Dark Green */ } </style> </head> <body> <div class="container"> <div class="box dotted-border"> <p>Dotted</p> <p>This is an example of dotted line</p> </div> <div class="box dashed-border"> <p>Dashed</p> <p>This is an example of dashed line</p> </div> <div class="box solid-border"> <p>Solid</p> <p>This is an example of solid line</p> </div> <div class="box double-border"> <p>Double</p> <p>This is an example of double line</p> </div> <div class="box groove-border"> <p>Groove</p> <p>This is an example of groove line</p> </div> <div class="box ridge-border"> <p>Ridge</p> <p>This is an example of ridge line</p> </div> <div class="box inset-border"> <p>Inset</p> <p>This is an example of inset line</p> </div> <div class="box outset-border"> <p>Outset</p> <p>This is an example of outset line</p> </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google