Asked  6 Months ago    Answers:  5   Viewed   21 times

I'd like to have a div that looks like this:

border example

Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.



You can do something like this, where you set a negative margin on the h1 (or whatever header you are using)

    border:2px solid black;


Note: you need to set a background as well as a width on the h1



To make it work with hiding the div, you could use some jQuery like this

    var a = $('h1').detach();

(You will need to modify...)

Example #2:

Tuesday, June 1, 2021
answered 6 Months ago

Yes, it is possible - see this:


.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
<div class='circle'>
  <div class='arc'></div>
Thursday, June 3, 2021
answered 6 Months ago

This is a tough one. There is no way of styling this specific control. Even if you force a different appearance under webkit you still get the damn resize handle:

You can, however, work around it and place a background image in the bottom left corner:

But the handler will still appear on top of it.

I'm afraid the only alternative is using jQuery UI resizable:

Thursday, August 5, 2021
Usman Khan
answered 4 Months ago

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>


Wednesday, September 15, 2021
edA-qa mort-ora-y
answered 3 Months ago

To quote another post:

There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.

If you apply the border-radius to an element that wraps around the video, and adds a -webkit-mask-image, then it can be done in Chrome. Here's a demo that masks a transparent png and clips the corners of the video:

Demo (transparent background):

Update: I changed the HTML/CSS to only use one wrapping element, and it works on (at least) IE9+, FF and Chrome.


div.outer {
    float: left;
    height: 240px;
div.outer video {
    width: 320px;
    height: 100%;
    border-radius: 32px 0 32px 0;


<div class="outer">
    <video src="" type="video/ogg" controls></video>
Monday, November 15, 2021
Jonathan Taylor
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :