- 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 - border-inline-start-style Property
CSS border-inline-start-style property determines the style of an element's inline start border, which in turn is mapped to the physical border of the element.
This property is a logical inline start border, which means that its value depends on the element's writing mode, directionality, and text orientation.
Based on the values of writing-mode, direction, and text-orientation, the inline start border corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style.
Possible Values
<'border-style'>: Shows the line style of the border. Refer border-style.
Applies to
All the HTML elements.
Syntax
border-inline-start-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;
CSS border-inline-start-style - Solid Border Style
Here is an example showing the solid border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-solid { border-inline-start-style: solid; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-solid">solid inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Inset Border Style
Here is an example showing the inset border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-inset { border-inline-start-style: inset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-inset">inset inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Dashed Border Style
Here is an example showing the dashed border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dashed { border-inline-start-style: dashed; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dashed">dashed inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Dotted Border Style
Here is an example showing the dotted border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dotted { border-inline-start-style: dotted; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dotted">dotted inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Groove Border Style
Here is an example showing the groove border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-groove { border-inline-start-style: groove; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-groove">groove inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Double Border Style
Here is an example showing the double border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-double { border-inline-start-style: double; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-double">double inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Outset Border Style
Here is an example showing the outset border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-outset { border-inline-start-style: outset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-outset">outset inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Ridge Border Style
Here is an example showing the ridge border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-ridge { border-inline-start-style: ridge; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-ridge">ridge inline start border</p> </div> </body> </html>
CSS border-inline-start-style - None Border Style
Here is an example showing no border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-none { border-inline-start-style: none; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-none">No inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Based On Writing Mode (Horizontal)
Here is an example showing the style of inline start border of p element based on the writing mode of the text, which is horizontal. The styles that are given are dotted and double. You may use other style values to see the change.
<html> <head> <style> div { background-color: peachpuff; width: 220px; height: 220px; } .sampleText-wm-htl { writing-mode: horizontal-tb; border: 5px solid blue; border-inline-start-style: dotted; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-htl">Horizontal Text</p> </div> </body> </html>
CSS border-inline-start-style - Based On Writing Mode (Vertical)
Here is an example showing the style of inline start border of p element based on the writing mode of the text, which is vertical. The styles that are given are dotted and double. You may use other style values to see the change.
<html> <head> <style> div { background-color: peachpuff; width: 220px; height: 220px; } .sampleText-wm-vtl { writing-mode: vertical-rl; border: 5px solid red; border-inline-start-style: double; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-vtl">Vertical Text</p> </div> </body> </html>
CSS border-inline-start-style - Based On Direction (left-to-right)
Here is an example showing the style of inline start border of p element based on the direction of the text, which is left-to-right. The styles that are given are dashed and groove. You may use other style values to see the change.
<html> <head> <style> div { background-color: black; width: 220px; height: 220px; } .sampleText-dir-ltr { direction: ltr; border: 8px solid red; border-inline-start-style: dashed; } p { padding: 15px; color: white; } </style> </head> <body> <div> <p class="sampleText-dir-ltr">Direction ltr</p> </div> </body> </html>
CSS border-inline-start-style - Based On Direction (right-to-left)
Here is an example showing the style of inline start border of p element based on the direction of the text, which is right-to-left. The styles that are given are dashed and groove. You may use other style values to see the change.
<html> <head> <style> div { background-color: black; width: 220px; height: 220px; } .sampleText-dir-rtl { direction: rtl; border: 10px solid gold; border-inline-start-style: groove; } p { padding: 15px; color: white; } </style> </head> <body> <div> <p class="sampleText-dir-rtl">Direction rtl</p> </div> </body> </html>
CSS border-inline-start-style - Related Properties
Following is the list of CSS properties related to border-inline-start-style:
property | description |
---|---|
border-block-start-style | Sets the style of the logical block start border of an element. |
border-block-end-style | Sets the style of the logical block end border of an element. |
border-inline-end-style | Sets the style of the logical inline end border of an element. |
To Continue Learning Please Login
Login with Google