స్టైల్ 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 గుణాత్మకాన్ని

ఉదాహరణ

ఉదాహరణ 1

పట్టికలోని బోర్డర్ స్టైల్ మార్చుతుంది:

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

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

ఉదాహరణ 2

పట్టికలోని బోర్డర్ స్టైల్ మార్చుతుంది:

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

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

ఉదాహరణ 3

పట్టికలోని బోర్డర్ స్టైల్ తిరిగి పొందుతుంది:

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

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

ఉదాహరణ 4

అన్ని వివిధ విలువలకు ప్రదర్శన:
var listValue = selectTag.options[selectTag.selectedIndex].text;

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

స్వయం ప్రయోగించండి

సింతకం

borderStyle గుణాత్మకాన్ని సెట్ చేస్తుంది:borderStyle గుణాత్మకాన్ని తిరిగి పొందుతుంది:

.style.borderStyle

borderStyle గుణాత్మకాన్ని సెట్ చేస్తుంది:object .style.borderStyle =
value విలువ
వర్ణన none
బోర్డర్ ఏమీలేదు నిర్వచిస్తుంది. డిఫాల్ట్. hidden
none తో సమానం, కానీ పట్టిక కేంద్రకాణం బోర్డర్ సంఘర్షణలను పరిష్కరించడంలో మాత్రమే లేదు. dotted
పిండి బోర్డర్ నిర్వచిస్తుంది. dashed
దశాంశ బోర్డర్ నిర్వచిస్తుంది. solid
పూర్తి బోర్డర్ నిర్వచిస్తుంది. double
రెండు బోర్డర్లను నిర్వచిస్తుంది. రెండు బోర్డర్ల వెడల్పు బోర్డర్-వెడల్పు విలువకు సమానంగా ఉంటుంది. groove 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color
3D గుండ్రం బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. ridge 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color
3D కంబలం బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. inset 3D inset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది. border-color
బోర్డర్-కలర్ విలువ: 3D outset బోర్డర్ బోర్డర్ నిర్వచిస్తుంది. ప్రభావం బోర్డర్-కలర్ విలువకు ఆధారపడి ఉంటుంది.
initial ఈ గుణాత్మకాన్ని అప్రమేయ విలువకు సెట్ చేస్తుంది. చూడండి initial.
inherit తన పేరిట ఆయా పరిణామాన్ని పాటిస్తుంది. చూడండి inherit.

సాంకేతిక వివరాలు

డిఫాల్ట్ విలువ: ఏమీలేదు
వారులువలు: పదబంధం స్ట్రింగ్ ఆయా కేంద్రకాణం కాంతి ప్రక్రియను సూచిస్తుంది.
CSS వెర్షన్: CSS1

బ్రౌజర్ మద్దతు

Chrome Edge Firefox సఫారీ ఒపెరా
Chrome Edge Firefox సఫారీ ఒపెరా
మద్దతు మద్దతు మద్దతు మద్దతు మద్దతు