Add stroke effect to DIV border in CSS

sarash

SOLVED CLOSED ACTIVE ANSWERED
User: sarash
Posted: on May 02, 2021 10:42 PM
Forum: HTML and CSS
Answer: 2
Views: 7590

Hello

I define div on-page and I want to put a stroke on the border of div below are codes:

.path {
    width:500px;
    height:200px;
    border:5px solid red;
    stroke:red;
}

but it doesn't work

possible please write code for both border and outline

can you help me?

Thanks in Advanced

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on May 03, 2021 02:13 AM
Modified: on Jan 13, 2022 09:57 AM
Report

Hi sarash,

Use outline property.

Refer below code.

HTML

<html>
<head>
<style>
    .path 
    {
          width:500px;
          height:200px;
          border: 5px solid black;
          outline: red solid 5px;
          text-align: center;
    }
</style>
</head>
<body>
    <div class="path">Welcome to ASPSnippets.com.</div>
</body>
</html>

Demo

sarash

0 4

Reply
User: sarash
Replied: on May 03, 2021 04:52 AM
Report

hi Dharmendr

I know the codes that you wrote but I thought Stroke is different from Border so what are these codes?

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on May 03, 2021 06:40 AM
Report

Refer below links for details.

https://www.w3schools.com/graphics/svg_stroking.asp

https://www.w3docs.com/learn-css/stroke.html

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add stroke effect to DIV border in CSS

Company

Explore

Follow us

Contact Us