Box med runde hjørner?

Her kan du få hjælp og stille spørgsmål til jQuery!
Besvar
Mipe
Begynder
Indlæg:13
Tilmeldt:28. nov 2012, 16:02
Box med runde hjørner?

Indlæg af Mipe » 11. feb 2013, 13:43

Er der nogen der kan svare på, hvorfor jeg bare ikke kan få denne lille simple kode til at vise runde hjørner?

Kan fint se den grå kasse med teksten, men den mangler bare de runde hjørner:

Kode: Vælg alt

<!doctype html>
<html>
<head>
  <title></title>

    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.corner.js"></script>

<script type="text/javascript">
$(document).ready(function()   {
$('.gray').corner("20px");
});
</script>

<style type="text/css">
.gray {
  background-color: #c0c0c0;
  width: 200px;
  margin: 20px;
  height: 40px;
  padding: 10px;
}
</style>

</head>
<body>

<div class="gray">Grå box med runde hjørner.</div>

</body>
</html>
Senest rettet af Mipe 14. feb 2013, 17:53, rettet i alt 1 gang.

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: Box med runde hjørner?

Indlæg af Daniel » 11. feb 2013, 13:53

Nu er jeg ikke så meget inde i JavaScript, men det du efterspørger kan du også gøre med CSS. :)

Kode: Vælg alt

border-radius: 20px;
Der er stadig nogle enkelte ældre browsere som ikke kan finde ud af den vej, men alt i alt burde det virke ret godt.

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: Box med runde hjørner?

Indlæg af ThomasI » 11. feb 2013, 16:56

Se den her video: http://www.nemprogrammering.dk/Tutorial ... r_CSS3.php

Der vises der hvordan du laver runde hjørner! ;)

Mipe
Begynder
Indlæg:13
Tilmeldt:28. nov 2012, 16:02

Re: Box med runde hjørner?

Indlæg af Mipe » 11. feb 2013, 18:28

Okay, det vil jeg lige kigge lidt nærmere på!

Josefine
Geni
Geni
Indlæg:308
Tilmeldt:9. dec 2011, 16:46

Re: Box med runde hjørner?

Indlæg af Josefine » 13. feb 2013, 09:28

Hej Mipe.

Må jeg foreslå CSS i stedet for? :) Jeg bruger bare disse koder:

Kode: Vælg alt

    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
Jeg har testet det, og det virker både i Chrome, Safari, Firefox, Opera og IE8 :)

Besvar