Style ατρίβουτο borderStyle

Ορισμός και χρήση

borderStyle Ατρίβουτο που ρυθμίζει ή επιστρέφει τον τύπο της κύριας γραμμής του στοιχείου.

Αυτό το ατρίβουτο μπορεί να χρησιμοποιήσει μια έως τέσσερις τιμές:

  • Μια τιμή, π.χ.：p {border-style: solid} - Όλες οι τέσσερις γωνίες είναι γεμάτες
  • Δύο τιμές, π.χ.：p {border-style: solid dotted} - Η επάνω και κάτω γραμμή είναι γεμάτη, τα δεξιά και αριστερά είναι ελαφρώς
  • Τρεις τιμές, π.χ.：p {border-style: solid dotted double} - Η επάνω γραμμή είναι γεμάτη, τα δεξιά και αριστερά είναι σημεία, η κάτω γραμμή είναι διπλή
  • Τέσσερις τιμές, π.χ.：p {border-style: solid dotted double dashed} - Η επάνω γραμμή είναι γεμάτη, η δεξιά γραμμή είναι ελαφρώς, η κάτω γραμμή είναι διπλή, η αριστερή γραμμή είναι ελαφρώς

Για περισσότερες πληροφορίες, δείτε:

Εκμάθηση CSS:CSS Περιγράμματα

Εγχειρίδιο CSS Εφαρμογής:Ατрибούτο border-style

HTML DOM Εγχειρίδιο Εφαρμογής:border 属性

border property

Instance

Example 1

Adds a solid border to the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "solid";

Example 2

Changes the style of the four borders of the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Example 3

Returns the border style of the <div> element:

document.getElementById("myDiv").style.borderStyle = listValue;

alert(document.getElementById("myDiv").style.borderStyle);

Example 4

Demonstration of all different values:
var listValue = selectTag.options[selectTag.selectedIndex].text;

document.getElementById("myDiv").style.borderStyle = listValue;

Try it yourself

Syntax

Sets the borderStyle property:Returns the borderStyle property:

.style.borderStyle

Sets the borderStyle property:object .style.borderStyle =
value Value
Description none
Defines a border without borders. Default. hidden
Same as "none", except in resolving border conflicts of table elements. dotted
Defines a dotted border. dashed
Defines a dashed border. solid
Defines a solid border. double
Defines two borders. The width of both borders is the same as the value of border-width. groove Defines a 3D inset border. The effect depends on border-color
Defines a 3D groove border. The effect depends on ridge Defines a 3D inset border. The effect depends on border-color
Defines a 3D ridge border. The effect depends on inset Defines a 3D inset border. The effect depends on border-color
The value of Defines a 3D outset border. The effect depends on the value of border-color.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: none
Return value: A string representing the style of the element's border.
CSS version: CSS1

browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη