Creating rounded corners with no images

I have looked all over online to find a method of making rounded corners on your webpage without using images or javascript. There are examples but I have not yet been able to find something with the ability to change your corner sizes generically. I could also not find one that was capable to work over all browsers…  so I decided to create one myself with the use of PHP.

So lets get started and create a class with 2 methods ‘divBody’ and ‘createDiv’.

class roundedDiv {

private function divBody () {}
public function createDiv () {}

}

Now we need to add a few properties to this class to make this div generic, I have come up with a few here and set a default value for some of the properties.
public $content = '';
public $id = '';
public $left = '';
public $top = '';
public $width = '1000';
public $height = '';
public $bg1 = '#fff';
public $bordercol = '#000';
public $position='absolute';
public $align = 'left';
public $radius = 5;
private $markup = '';

‘$markup’ is going to be the html that you shall return back to your script.

We are going to create the rounded edges in the ‘divBody’ method but before we do that lets call ‘divBody’ in the ‘createDiv’ method with all the properties passed through to ‘divBody’.

public function createDiv () {

$this->divTop($this->id,
$this->bordercol,
$this->radius,
$this->position,
$this->left,
$this->top,
$this->width,
$this->height,
$this->bg1,
$this->bordercol,
$this->content);

return $this->markup;

}

Now for the ‘divBody’ method,  lets add all those passed through properties to our method.

private function divTop ($id, $bordercol, $r, $position, $left, $top, $width, $height, $bg1, $bordercol, $content, $scroll) {}

and add on a few variable types


$markup = '';
$intervals = $r*10;
$delta_theta = 2 * pi() / $intervals;
$theta = 0;
$topdiv = '';
$bottomdiv = '';
$htcss = ($height) ? 'height:'.$height.'px;' : '';
$bgcss = ($bg1) ? 'background:'.$bg1.';' : '';


$Intervals – the amount of points around the circle.
$delta_theta – to help us get our gradient for each point.
$theta – will be used to get our x,y location using (cos, sin)
$htcss – If you set your height you will find that your outer div does not expand, so if you need to set your height make sure your content inside doesn’t exceed your height. But if you don’t set your height the div will expand with the content inside.
$bgcss – If you want a transparent div then don’t set your background

next I shall create two div’s one inside the other, this is needed or else your CSS positioning gets messed up.

$markup .= '<div>';
$markup .= '<div id="'.$id.'" style="position: '.$position.'; left: '.$left.'px; top: '.($top+$r).'px; margin: auto; width: '.($width+1).'px; height: '.($height+($r*2)).'px;">';
$markup .= '</div></div>';

$r – this is the radius, it has been added to top and height so that content remains at correct height.

Now we need to loop through each interval and get our point values of the circle to create our rounded edges. We shall place this code between the most inner div.

for($i = 0; $i < $intervals;$i++) {
$xpos = round($r * cos($theta));
$ypos = round($r * sin($theta));

$theta += $delta_theta;
}

Now we are going to create the border lines. We shall start with the top line. Place the code in the for loop, before $delta_theta is added to $theta.

if ($ypos == (-1*$r)) {
$topdiv .= '<div style="position: absolute; left: '.$r.'px; top: '.($ypos).'px; width:'.($width-($r*2)).'px; border-top: 1px solid '.$bordercol.';"></div>';
}

(-1*$r) – this is the most top y position of the circle, therefore when we are on the most top point a border-top is created.

Next we shall add the curves,

if ($xpos < 0 && $ypos < 0) {

$topdiv .= '<div style="position: absolute; left: '.($xpos+$r).'px; top: '.($ypos).'px; width: '.((abs($xpos)*2)+$width-($r*2)-2).'px; height: 1px; border-left: 1px solid '.$bordercol.'; border-right: 1px solid '.$bordercol.'; '.$bgcss.'"></div>';

and the bottom corners…
$bottomdiv .= '<div style="position: absolute; left: '.($xpos+$r).'px; top: '.(abs($ypos)-1).'px; width: '.((abs($xpos)*2)+$width-($r*2)-2).'px; height: 1px; border-left: 1px solid '.$bordercol.'; border-right: 1px solid '.$bordercol.'; '.$bgcss.'"></div>';
}

We just need the coordinates in the top left of the circle, and thats what I have done here by getting the points of the top left and mirroring the points for the rest of the circle well adding the width of the div.

What I am doing is adding the width to the absolute value of the x coordinant and subtracting the radius twice, one radius for the width that the circle’s left corner took up and the other radius to get the correct positioning for the right top corner.

now the bottom line is exactly the same as the top line except we checking to see if the y position is at its most lowest point

if ($ypos == $r) {
$bottomdiv .= '<div style="position: absolute; left: '.$r.'px; top: '.($ypos).'px; width: '.($width-($r*2)).'px; border-top: 1px solid '.$bordercol.';"></div>';

}

now that we have done that, we come out of the loop statment and add all the divs together with the content straight after the loop.

$markup .= '<div style="position: relative;">'.$topdiv.'</div>';
$markup .= '<div style="border-left: 1px solid '.$bordercol.'; border-right: 1px solid '.$bordercol.'; '.$htcss.$bgcss.'">'.$content.'</div>';
$markup .= '<div style="position: relative;">'.$bottomdiv.'</div>';

I have added borders on the left and right of the div containing the content.

At the end of this method pass the $markup value to the markup property of this class
$this->markup .= $markup;

and that is it, all you need to do now is start a new instance and use the method ‘createDiv’ to get your rounded edges.

$div = new roundedDiv;

$div->id = 'content';
$div->content = 'helloworld';
$div->left = '';
$div->top = '';
$div->height = '483';
$div->width = '1000';
$div->scroll = false;
$div->radius = 5;
$div->bg1 = '#fff';
$div->bordercol = '#000';

echo $div->createDiv();

have a look at my site, I am using it here techfind.co.uk