-1

I want to border add in below picture

https://i.stack.imgur.com/1ta5o.png

and I want border add like

option text before and after and whole box

https://i.stack.imgur.com/TzCHx.png

border css before after or background how can achieve it?

Gert B.
  • 2,282
  • 18
  • 21
Jaydip Patel
  • 1
  • Does this answer your question? [how to put text in border](https://stackoverflow.com/questions/7632259/how-to-put-text-in-border) – kiner_shah Nov 16 '21 at 06:36
  • 2
    It is not clear why this question is tagged PHP or what the structure of the HTML is. Please have a go at coding this (try border with border-radius) and show us the code you have so far - read: https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Nov 16 '21 at 06:40
  • 1
    Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. Please first ***>>>[Search for related topics on SO](https://www.google.com/search?q=css+border+before+after+site%3Astackoverflow.com)<<<*** and if you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. – mplungjan Nov 16 '21 at 06:45
  • ok thanks but my structure is not possible with `legend` and `fieldset` so without i design it – Jaydip Patel Nov 16 '21 at 06:46
  • 1
    `my structure is not possible with legend and fieldset`... Why not, specifically? Please show your existing html so we can actually help you instead of guessing or pointing to to other suggestions. See also [ask] and how to create a [mre] of your issue. – ADyson Nov 16 '21 at 07:32

1 Answers1

1

I see it says in the comments "not possible with legend an fieldset", but but it exactly reproduces the above:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body{
            display: flex;
        }
        fieldset {
            border-radius: .4em;
            border-color: gray;
            border-width: 1px;
        }
        legend:after {
            content: '*';
            color: red;
        }
        fieldset div {
            display: grid;
            grid-template-columns: auto auto;
            grid-gap: .5em;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Option:</legend>
            <div>
                <label for="not_toasted">Not Toasted</label>
                <input type="radio" id="not_toasted" name="option">
                <label for="toased">Toasted</label>
                <input type="radio" id="toased" name="option">
            </div>
            <br>
        </fieldset>
    </form>
</body>
</html>
Schlotter
  • 105
  • 1
  • 6